実現したいこと
クリアボタンを押した後に、送信ボタンを非表示にしたいです。
前提
HTMLで作ったアンケートページに、javascriptを実装しています。
発生している問題・エラーメッセージ
必須項目をすべて入力した後にクリアボタンを押した場合、
送信ボタンは無効になるので、非表示（色を薄く）したいのですが、
送信ボタンが表示（色が濃い）されたままです。
クリアボタンを押したら、
自動的にすぐ送信ボタンが非表示になってほしいです。
HTML・javascript
<!doctype html> <html> <head> <meta charaset="UTF-8"> <title>課題アンケート</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-－アンケートタイトルと説明文--> <h1>アンケート</h1> <h3><p>ここはアンケートページです。</p> <p>ご協力よろしくお願いします。</p></h3> <form action="thankyou[Javascript].html" method="post" name="form" id="form"> <div> お名前（カナ） <input type="text" name="name" id="name" maxlength="10" placeholder="例）スズキ タロウ" onblur="return nameCheck()" required><br> <span id="errormsg"></span> </div> <div> <!--好きな年齢選択--> <p>年齢 <select name="age" id="age" required> <option value="">未選択</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> <option value="33">33</option> <option value="34">34</option> <option value="35">35</option> <option value="36">36</option> <option value="37">37</option> <option value="38">38</option> <option value="39">39</option> <option value="40">40</option> <option value="41">41</option> <option value="42">42</option> <option value="43">43</option> <option value="44">44</option> <option value="45">45</option> <option value="46">46</option> <option value="47">47</option> <option value="48">48</option> <option value="49">49</option> <option value="50">50</option> <option value="51">51</option> <option value="52">52</option> <option value="53">53</option> <option value="54">54</option> <option value="55">55</option> <option value="56">56</option> <option value="57">57</option> <option value="58">58</option> <option value="59">59</option> <option value="60">60</option> <option value="61">61</option> <option value="62">62</option> <option value="63">63</option> <option value="64">64</option> <option value="65">65</option> <option value="66">66</option> <option value="67">67</option> <option value="68">68</option> <option value="69">69</option> <option value="70">70</option> <option value="71">71</option> <option value="72">72</option> <option value="73">73</option> <option value="74">74</option> <option value="75">75</option> <option value="76">76</option> <option value="77">77</option> <option value="78">78</option> <option value="79">79</option> <option value="80">80</option> <option value="81">81</option> <option value="82">82</option> <option value="83">83</option> <option value="84">84</option> <option value="85">85</option> <option value="86">86</option> <option value="87">87</option> <option value="88">88</option> <option value="89">89</option> <option value="90">90</option> <option value="91">91</option> <option value="92">92</option> <option value="93">93</option> <option value="94">94</option> <option value="95">95</option> <option value="96">96</option> <option value="97">97</option> <option value="98">98</option> <option value="99">99</option> </select> </p> </div> <div> <!--性別選択--> <p id="gender">性別 <input type="radio"name="gender" value="男性" required>男性 <input type="radio"name="gender" value="女性">女性 <input type="radio"name="gender" value="その他" checked>その他 </p> </div> <div> <!--好きな季節選択--> <p>好きな季節 <select name="season" id="season" required> <option value=""selected>未選択</option> <option value="春">春</option> <option value="夏">夏</option> <option value="秋">秋</option> <option value="冬">冬</option> </select> </p> </div> <div> <!--自由入力欄--> <p>自由入力 <textarea maxlength="100" name="message" placeholder="その他何かございましたら自由に記載してください"></textarea> </p> </div> <p id="button"> <!--送信ボタンとクリアボタン--> <input type="button" onclick="reset()" value="クリア" id="resetButton"> <input type="submit" value="送信する" id="submitButton" onclick="return update()" disabled> </p> </form> <!--Javascript--> <script> //1.クリアボタンで初期値に戻る function reset(){ document.form.reset(); console.log("クリア完了"); } //2.入力の状態で、項目からフォーカスが外れると //氏名欄にエラー表示、入力があればエラーメッセージを非表示にする const msgColor=document.getElementById('errormsg'); msgColor.style.color="red"; function nameCheck(){ if (form.name.value=="") { document.getElementById('errormsg').innerHTML='※入力は必須です'; return false; }else { document.getElementById('errormsg').innerHTML= ""; return true; } } //3.必須項目が全て入力されたら、送信ボタンを動作する //必須項目のチェックと、ボタン操作のIDを指定 const form = document.getElementById("form"); const button = document.getElementById("submitButton"); //入力されたり、ラジオボタンやセレクトボックスに変化が起こった時、 //情報を更新する form.addEventListener("input", update); form.addEventListener("change", update); //update関数の内容 function update(){ //必須項目が入力されているか確認する const isRequired = form.checkValidity(); //必須項目が入力された時、送信ボタンの無効を解除 if(isRequired){ submitButton.disabled=false; submitButton.style.opacity=1; submitButton.style.cursor="pointer"; return; }else{ submitButton.disabled=true; submitButton.style.opacity=0.2; } } </script> </body> </html>
0 コメント