- 締切済み
ラジオボタンの選択内容をテキストで表示する
私は現在、卒業論文でwebサイトを使った類似性の研究をしています。そこで、webページの最初のページでラジオボタンを用いて選択してもらった回答と全く同じテキストを2ページ目以降（２－４ページ目）に表示させたいのですが、HTMLやプログラミングの知識が全くないため、調べながら試してみてもうまくできませんでした。 そこで、どのように書いていけば思う通りにwebが動いてくれるのかを教えて頂きたいです。不躾な質問であるとは思うのですが、何卒宜しくお願い致します。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Proof4
- ベストアンサー率78% (151/192)
----index.html---- <html> <head> <meta charset="utf-8"> <title>入力</title> <script> document.addEventListener("DOMContentLoaded", function(){ document.getElementById("submit").addEventListener("click", submit); }); function getRadio(name){ //ラジオボタンオブジェクトを取得する関数 var radios = document.getElementsByName(name); for(var i=0; i<radios.length; i++){ if (radios[i].checked) { return radios[i].value; } } } // 送信ボタンを押したときの動作 function submit(){ var param = "radio1=" + getRadio("radio1"); location.href = "get.html?" + param; // 次のページに移動 } </script> </head> <body> <form id="myform"> <label> <input type="radio" name="radio1" value="1">1 </label> <label> <input type="radio" name="radio1" value="2">2 </label> <label> <input type="radio" name="radio1" value="3">3 </label> <label> <input type="radio" name="radio1" value="4">4 </label> <label> <input type="radio" name="radio1" value="5">5 </label> <button type="button" id="submit">送信</button> </form> </body> </html> ----get.html---- <html> <head> <meta charset="utf-8"> <title>結果取得</title> <script> // クエリ文字列を取得する関数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } } document.addEventListener("DOMContentLoaded", function(){ // 結果を表示する document.getElementById("result").innerHTML = getQueryVariable('radio1'); }); </script> </head> <body> --結果-- <div id="result"> </div> <a href="index.html">戻る</a> </body> </html> 上記はサンプルコードです。コピペし、それぞれを同じフォルダ内にindex.html, get.htmlとして作成するとデモが動くと思います。 仕組みとしてはURLにクエリ文字列を付加、それを読み込むことで結果を次のページに渡しています。 これを応用することで何ページにもわたって回答を保持することが可能です。
