実現したいこと
JavaScritについてご質問です。
以下のようなフォームを作成しましたが、
質問を上から順番に表示させたい場合はどのようにしたらよいでしょうか。
発生している問題・分からないこと
最初は「申込番号」しか表示されないが、入力すると次に「到着書類3点」が表示されるイメージです。
初心者な質問で申し訳ありませんがよろしくお願いいたします。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sample Form</title> <style> #outputContainer { margin-top: 20px; display: none; } #outputLabel { font-weight: bold; } #outputText { width: 22%; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; overflow-y: auto; resize: both; /* ユーザーによるサイズ変更を許可 */ margin-bottom: 10px; } </style> </head> <body> <form id="myForm"> <p> 申込番号：<input type="text" name="申込番号" /><br> 到着書類3点： <input type="radio" name="到着書類3点" value="あり" /> あり <input type="radio" name="到着書類3点" value="なし" /> なし<br> 不足書類（不備）：<input type="text" name="不足書類（不備）" /><br> 利用申込書右上に到着日付： <input type="radio" name="到着日付" value="記入" /> 記入 <input type="radio" name="到着日付" value="なし" /> 未記入<br> 利用申込書の入力日は、到着日から： <input type="radio" name="利用申込書" value="6か月以内" /> 6か月以内 <input type="radio" name="利用申込書" value="6か月より後（不備）" /> 6か月より後（不備）<br> 自由回答：<br> <textarea name="freeans" id="freeans" rows="5" cols="40"></textarea><br><br> <input type="button" value="出力" onclick="displayInput()" /> <input type="reset" value="取り消し" onclick="clearInput()" /> </p> </form> <div id="outputContainer"> <div id="outputLabel">入力内容:</div> <textarea id="outputText" readonly rows="7" cols="40"></textarea> </div> <script> function displayInput() { var form = document.getElementById("myForm"); // フォーム内の入力値を取得 var number = form.elements["申込番号"].value; var documentValue1 = getRadioValue(form.elements["到着書類3点"]); var nodocument = form.elements["不足書類（不備）"].value; var documentValue2 = getRadioValue(form.elements["到着日付"]); var documentValue3 = getRadioValue(form.elements["利用申込書"]); var freeans = form.elements["freeans"].value; // 入力値をテキストボックスに反映 var outputText = document.getElementById("outputText"); outputText.value = "申込番号: " + number + "\n" + "到着書類3点: " + documentValue1 + "\n" + "不足書類（不備）: " + nodocument + "\n" + "到着日付: " + documentValue2 + "\n" + "利用申込書日付: " + documentValue3 + "\n" + "自由回答: " + freeans; // テキストボックスとラベルを表示 var outputContainer = document.getElementById("outputContainer"); outputContainer.style.display = "block"; } function getCheckedValues(checkboxes) { var values = []; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { values.push(checkboxes[i].value); } } return values.join(", "); } function getRadioValue(radioButtons) { for (var i = 0; i < radioButtons.length; i++) { if (radioButtons[i].checked) { return radioButtons[i].value; } } return null; } function clearInput() { // 取り消しボタンが押されたときにテキストボックスとラベルを非表示にし、入力内容をクリア var outputContainer = document.getElementById("outputContainer"); outputContainer.style.display = "none"; var outputText = document.getElementById("outputText"); outputText.value = ""; var form = document.getElementById("myForm"); form.reset(); } </script> </body> </html>
0 コメント