- ベストアンサー
チェックされた項目の表示方法について
- htmlとJavaScriptを使って、アンケートのようなものを作成しています。質問に対する回答をラジオボタン・チェックボックス・テキストエリアなどで選択（入力）し、結果を表示させたいです。
- 質問項目の作成は終わっており、HTMLのinput要素を使って作成しました。しかし、JavaScriptの実装方法についてはわからず困っています。
- submitボタンを使ってデータを送信するのかと思い、インターネットで検索してみましたが、求めている情報が見つかりませんでした。参考になるウェブサイトや、使えるサンプルコードはありますか？
- welle_well
- お礼率4% (2/48)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
内容がよくわからないので、要領のみのごく簡単なサンプルを… 「左のテーブル」がどんなので、どのように「吐き出しエリア」があるのかわからないので、formからreadonlyの別のformへコピーするような形で作成しています。 質問では「ボタンを押したら」になっていましたが、onchangeで同時に反映するようにしています。実は、IEではonchangeイベントがバブルしないようなのでこのままだとIEでは使えません。 （まぁ、とりあえずのサンプルなので…ボタンクリックにすればこのようなことはありませんね） * 例ではinputのtype=radioとtextしか使っていないので、その分だけです。 * swithでの分岐に付け加えれば、他の要素でも対応可能でしょう。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #out input { border: 0; } </style> <script type="text/javascript"> <!-- function check(frm){ var i, source = frm.elements; var dest = document.getElementById("out").elements; for (i=0; i<dest.length;) dest[i++].value = ""; for (i=0; i<source.length; i++) copy(source[i]); function copy(node){ switch(node.nodeName){ case "INPUT": switch(node.type){ case "text": set(node); break; case "radio": if(node.checked) set(node); } } } function set(node){ var d = dest[node.name]; if(d) d.value = node.value; } } //--> </script> </head> <body> <form name="form1" action="" method="" onchange="check(this)"> 氏名：<input type="text" name="simei" value=""> <br> 性別：<input type="radio" name="seibetu" value="女">女 <input type="radio" name="seibetu" value="男">男 <br> 年齢：<input type="radio" name="age" value="10">10代 <input type="radio" name="age" value="20">20代 <input type="radio" name="age" value="30">30代 <input type="radio" name="age" value="40">40代 <input type="radio" name="age" value="50～">50代～ </form> <hr style="margin:30px;"> <form id="out"> 氏名：<input type="text" name="simei" value="" readonly> <br> 性別：<input type="text" name="seibetu" value="" readonly> <br> 年齢：<input type="text" name="age" value="" readonly> </form> </body> </html>
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 JavaScriptのみで実装でしょうか。 サーバ側で集計したりはしませんか。 補足願います。
補足
サーバーでは集計しません。 反映後、その文言を別のツールに張り付け処理をする、という作業が発生するため、 単なるアンケートではないですね。 説明不足ですみません。
補足
回答ありがとうございます！ 確かに、内容について説明不足ですね・・・ 左側のイメージは、こんな感じです↓ （セルの大きさがグチャグチャですが。。汗） アンケートというより、テンプレート作成といった感じですね。 お客様の情報を入力し、テンプレートを作成。 それをまた別のツールにコピーし登録作業を行う。といったイメージです。 <Table Border="4" Width="600"> <Tr> <Td ColSpan="4" Align="Center"> <B>希望日</B> </Td> </Tr> <Tr> <Td Valign="top" Width="25%" Height="10"> <input type="radio" name="kibou" value="１日">１日 <Br> </Td><Td Valign="top" Width="25%" Height="10"> <input type="radio" name="kibou" value="２日">２日 <Br> </Td> <Td Valign="top" Width="25%" Height="10"> <input type="radio" name="irai" value="kibou">３日 <Br> </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="kibou">その他 </Td> </Tr> <Br> <Table Border> <Tr> <Td>連絡先</Td><Td><TEXTAREA cols="30" rows="1"></TEXTAREA></Td></Table> <Table Border> <Tr> <Td>その他特記事項</Td><Td><TEXTAREA cols="30" rows="5"></TEXTAREA></Td></Table> ※この下に、「右側へ反映」のようなボタンを作り、それを押すと、内容が吐きだされるようにしたいです。 そのボタンの作り方もまだ調べきれていませんが、、 右側のイメージは、空白の吐きだしエリアです。 「右側へ反映」を押すと、以下のような内容で作成されるようにしたいです。 希望日：（ここにkibouの内容が反映） 連絡先：（ここに連絡先の右側に入力した内容が反映） その他：（ここにその他特記事項の右側に入力した内容が反映） といったイメージです。 よく考えてみると、左側も不備だらけですね…。 ご教示頂けると幸いです。