HTMLとCSS,javascriptを用いて,アンケートフォームを作成しております。
チェックボックスやラジオボタン,自由記述欄など,すべてを回答必須にしたいのですが,以下スクリプトの「問4」のみ回答必須にすることができておりません。
つまり,問3と問4,問5の3つが表示されるページでは,問4に回答しなくても次に進めてしまいます。
大変恐縮ですが,問4も回答必須にする方法をお分かりの方がいましたら,お教えいただけますと幸いです。
<html> <head> <title>調査</title> <!-- JavaScript --> <script type="text/javascript"> let submitted = false; let mode = 1; function inputCheck() { let listCheck; let curButton; if ( mode == 1) { <!-- 同意にチェックがなければ、無効化 --> listCheck = ["entry.564542402"]; curButton = document.getElementsByName("1to2"); } else if ( mode == 2 ) { <!-- すべて選択されていなければ、無効化 --> listCheck = ["entry.553356819", "entry.1656837132"]; curButton = document.getElementsByName("2to3"); } else if ( mode == 3 ) { <!-- すべて選択されていなければ、無効化 --> listCheck = ["entry.1850144316", "entry.294966724","entry.1960315383"]; curButton = document.getElementsByName("button"); } curButton[0].disabled = true; if ( validationCheck(listCheck) == "NG" ) { return false; } if ( requiredCheck(listCheck, curButton) == "NG" ) { return false; } curButton[0].disabled = false; } function prevpart() { let rect = document.getElementById("to_top").getBoundingClientRect(); scrollTo(0, rect.top); if ( mode == 2) { mode = 1; document.getElementById("part1").style.display = "block"; document.getElementById("part2").style.display = "none"; } else if (mode == 3) { mode = 2; document.getElementById("part2").style.display = "block"; document.getElementById("part3").style.display = "none"; } } function nextpart() { let rect = document.getElementById("to_top").getBoundingClientRect(); scrollTo(0, rect.top); if ( mode == 1) { mode = 2; document.getElementById("part1").style.display = "none"; document.getElementById("part2").style.display = "block"; } else if (mode == 2) { mode = 3; document.getElementById("part2").style.display = "none"; document.getElementById("part3").style.display = "block"; } else if (mode == 3) { mode = 4; document.getElementById("part3").style.display = "none"; document.getElementById("part4").style.display = "block"; } } function requiredCheck(listCheck, curButton) { for (let i = 0; i < listCheck.length; i++) { let curCheck = document.getElementsByName(listCheck[i]); let flg = false; console.log(mode); console.log(curCheck.length); for (let j = 0; j < curCheck.length; j++) { if( mode == 3 ) { if(curCheck[j].value != "") { flg = true; break; } } else { if(curCheck[j].checked) { flg = true; break; } } } if( flg == false) { return "NG"; } } return "OK"; } function validationCheck(listCheck) { if ( mode == 3 ) { for (let i = 0; i < listCheck.length; i++) { if (listCheck[i] == "entry.294966724") { let curCheck = document.getElementsByName(listCheck[i]); if (isNaN(curCheck[0].value)) { return "NG"; } if (Number(curCheck[0].value) < 18 | Number(curCheck[0].value) > 99) { return "NG"; } } } } return "OK"; } </script> <!-- CSS --> <style> .vertical { text-align: left; writing-mode: vertical-rl; } #part1 { width : 50%; margin : 0 25% 0; } #part1 h1{ text-align : center; } #part2, #part3, #part4 { width : 80%; margin : 0 10% 0; display: none; } #part3 table td{ height: 80px; } .box { border: 2px solid black; padding: 10px; } .thanks { border: 2px solid black; padding: 20px; font-size: 1.5em; text-align: center; line-height: 2em; } .thanks b { color: red; } th { height:200px; width:30px; } u { font-weight: bold; } .dot { text-align: center; } .bottom { font-size: 1.5em; font-family: Yu Gothic; text-align: left; vertical-align: bottom; font-style: italic; font-weight: 900; } .bottom_left { margin: 20px 0px 10px; float: left; } .bottom_right { margin: 20px 0px 10px; float: right; } td.radio_center { text-align: center; } </style> </head> <body> <div id="to_top"> </div> <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {nextpart();}"></iframe> <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfPAoXdMTf9Qm1tYMICPFZwYzTOWpOK1DbIoUvYxZOl9WZsQA/formResponse" target="hidden_iframe" onsubmit="submitted=true;"> <div id="part1"> <h1>質問紙調査ご協力のお願い</h1> <p class="box">以下の注意事項をよく読み、ご確認のうえ、本調査にご協力頂ける方は、別紙の同意書に必要事項を記入し、質問紙にご回答お願いいたします。</p> <ul> <li>この調査は、親密な対人関係に関するものです。ご回答いただいたデータは、社会に貢献しうる<u>貴重なデータ</u>となります。是非ご協力ください。</li> <li>この調査への参加は自由です。また、回答の途中で気分が悪くなったり、答えられない質問があった場合、途中で中断していただいてもかまいません。調査の不参加や中断によって、あなたの不利益になることはありません。</li> <li>この調査は無記名でおこないます。また、ご回答いただいたデータはすべて匿名のものとして扱い、統計的に処理いたします。そのため、本人が特定され、回答者の方にご迷惑をおかけすることはありません。<br>個人の情報が漏れることのないよう、データ管理も厳重に行います。</li> </ul> <p>回答を始める前に…</p> <ul> <li>正しい答えや、間違った答えというものはありませんので、思った通りに答えてください。<br>それぞれの質問をよく読み、全ての質問に答えてください。回答漏れのないようにお願いします。</li> </ul> <table class="bottom_right"> <tr> <td>私は以上の事項を理解したうえで、本調査への協力に同意します。</td> <td><input type="checkbox" name="entry.564542402" value="上記3点を理解した。" onchange="inputCheck();"></td> </tr> <tr> </tr> <tr> <td colspan="2"> <button type="button" class="bottom_right" name="1to2" onclick="nextpart()" value="次へ" disabled>次へ</button> </td> </tr> </table> </div> <div id="part2"> <table> <tr> <table border=1> <tr> <td>問2</td> <td colspan="8">以下の文それぞれについて、「5.非常にあてはまる」~ 「1.全くあてはまらない」のうち、あなたにあてはまる数字を1つ選んで〇をつけてください。</td> </tr> <tr> <th class="bottom" colspan="2"></th> <th class="vertical">1.全くあてはまらない </th> <th class="vertical">2.あまりあてはまらない </th> <th class="vertical">3.どちらとも言えない </th> <th class="vertical">4.全く当てはまらない </th> <th class="vertical">5.非常にあてはまる </th> </tr> <tr> <td>1)</td> <td>自分にはいろいろな良い素質があると思う</td> <td class="radio_center"><input type="radio" name="entry.553356819" value="1" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.553356819" value="2" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.553356819" value="3" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.553356819" value="4" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.553356819" value="5" onchange="inputCheck();"></td> </tr> <tr> <td>2)</td> <td>自分のことを好ましく感じる</td> <td class="radio_center"><input type="radio" name="entry.1656837132" value="1" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.1656837132" value="2" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.1656837132" value="3" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.1656837132" value="4" onchange="inputCheck();"></td> <td class="radio_center"><input type="radio" name="entry.1656837132" value="5" onchange="inputCheck();"></td> </tr> </table> </tr> </table> <button type="button" class="bottom_left" name="2to1" onclick="prevpart()" value="前へ">前へ</button> <button type="button" class="bottom_right" name="2to3" onclick="nextpart()" value="次へ" disabled>次へ</button> </div> <div id="part3"> <table> <tr> <td>問3 </td> <td>あなたのアカウント名を入力してください。<br><input type="text" name="entry.1850144316" value="" onchange="inputCheck();"></td> </tr> <tr> <td>問4 </td> <td>あなたの性別を選んでください。<br><input type="radio" name="entry.1960315383" value="男性" onchange="inputCheck();">男性<input type="radio" name="entry.1960315383" value="女性" onchange="inputCheck();">女性</td> </tr> <tr> <td>問5 </td> <td>あなたの年齢を入力してください。<br><input type="text" name="entry.294966724" value="" onchange="inputCheck();"></td> </tr> </table> <button type="button" class="bottom_left" name="3to4" onclick="prevpart()" value="前へ">前へ</button> <button type="submit" class="bottom_right" name="button" value="送信" disabled>送信</button> </div> <div id="part4"> <p class="thanks">本調査へのご協力ありがとうございました。<br>本調査の参加確認コードは「 <b>ABCDEFG</b> 」です。<br>調査協力の証明に必要ですので,メモしておいてください。</p> </div> </form> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。