みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ラジオボタンの選択内容をテキストで表示する

私は現在、卒業論文でwebサイトを使った類似性の研究をしています。そこで、webページの最初のページでラジオボタンを用いて選択してもらった回答と全く同じテキストを2ページ目以降(2-4ページ目)に表示させたいのですが、HTMLやプログラミングの知識が全くないため、調べながら試してみてもうまくできませんでした。
そこで、どのように書いていけば思う通りにwebが動いてくれるのかを教えて頂きたいです。不躾な質問であるとは思うのですが、何卒宜しくお願い致します。

投稿日時 - 2017-07-20 18:40:16

QNo.9353973

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

----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にクエリ文字列を付加、それを読み込むことで結果を次のページに渡しています。
これを応用することで何ページにもわたって回答を保持することが可能です。

投稿日時 - 2017-07-20 21:17:55

あなたにオススメの質問