チェックされた項目の表示方法について

前へ 次へ
このQ&Aのポイント
  • htmlとJavaScriptを使って、アンケートのようなものを作成しています。質問に対する回答をラジオボタン・チェックボックス・テキストエリアなどで選択（入力）し、結果を表示させたいです。
  • 質問項目の作成は終わっており、HTMLのinput要素を使って作成しました。しかし、JavaScriptの実装方法についてはわからず困っています。
  • submitボタンを使ってデータを送信するのかと思い、インターネットで検索してみましたが、求めている情報が見つかりませんでした。参考になるウェブサイトや、使えるサンプルコードはありますか？
回答を見る
  • ベストアンサー

チェックされた項目を、指定された場所に表示したい

htmlとJavaScriptで、アンケートのようなものを作成しています。 ラジオボタン・チェックボックス・テキストエリア等で回答を選んで（書き込んで）もらい、 それぞれの結果を、吐きだしエリアへ表示させたいです。 ※イメージとして…左のテーブルに質問内容があり、選択後「決定」ボタンを押すと、右側テーブル内にあるスペースにチェックされた項目が吐きだされる。といった感じです。 左側の質問項目の作成は終わっており（<input type="radio" name="seibetu" value="女">女）のように作成しました）、後はJS！と思ったのですが… 仕事で何年も前に触ったきりの為、まったく分からなくなってしまいました。。 「submitかな？」と思い、HP等も色々と検索してみたのですが、求めているものが見つからず…。 何か参考になるようなHPや、そのままコピーして使えるようなサンプルは御座いませんでしょうか。 宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.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>

welle_well
質問者

補足

回答ありがとうございます！ 確かに、内容について説明不足ですね・・・ 左側のイメージは、こんな感じです↓ （セルの大きさがグチャグチャですが。。汗） アンケートというより、テンプレート作成といった感じですね。 お客様の情報を入力し、テンプレートを作成。 それをまた別のツールにコピーし登録作業を行う。といったイメージです。 <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の内容が反映） 連絡先：（ここに連絡先の右側に入力した内容が反映） その他：（ここにその他特記事項の右側に入力した内容が反映） といったイメージです。 よく考えてみると、左側も不備だらけですね…。 ご教示頂けると幸いです。

その他の回答 (1)

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 JavaScriptのみで実装でしょうか。 サーバ側で集計したりはしませんか。 補足願います。

welle_well
質問者

補足

サーバーでは集計しません。 反映後、その文言を別のツールに張り付け処理をする、という作業が発生するため、 単なるアンケートではないですね。 説明不足ですみません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 指定された場所に、取得した値を表示したい。

    アンケート結果を入力するツールを作成したいと思っています。 ラジオボタン・チェックボックス・テキストエリアに必要項目を入力し、 「作成」ボタンをクリックする事で、テキストエリアに情報を取得（吐きだし）したいのですが、 HTML部分は完成しているのですが、JavaScript部分をどう組んでいいのか分かりません。 どなたかご教示ください。 また、色々検索し、たくさんのサイトを拝見したのですが、 イメージしているものが記載されたサイトになかなか辿りつけませんでした… 本も探してみたのですが、求めている情報が記載されておらず… 参考になるサイト・本をご存知の方いらっしゃいましたら、併せて教えてください。 HTML部分は、以下のようなイメージです。 上側に入力した内容を、下のテキストエリアに吐き出したいです。 <title></title> <form action=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> <br> <button type="button">内容反映</button> <input type="reset" value="リセット"> <br> <br> <br> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> </form>

  • アンケートページでチェックボタンのチェック数を表示させたい

    閲覧ありがとうございます。<m(__)m> アンケートページ作成の際、JavaScriptがうまく動いてくれず、 調べても原因が分からず・・・ほとほと困り果てております。 どなたか詳しい方、よろしくお願いいたします。 ＜アンケート内容＞ ・ラジオボタン形式とチェックボタン形式 ・チェックボタンがちょっと変わっていて、チェック中にチェックした数を 　一番下のテキストフィールドに表示したい。 ＜問題＞ ・チェック数がカウントされない。 　ラジオボタンを削除して、チェックボタンのみ単独の場合は問題なく動く。 ＜記述内容＞ <head> <SCRIPT language="JavaScript"> <!--eelife ck_suu=3; //チェックボックス数 function chg(){ v=0; for (i=0; i<ck_suu; i++){ if (document.hogehoge.elements[i].checked){v++; } } msg ="チェック数は " + v + "個です。"; document.hogehoge.tBox.value = msg; } // --> </SCRIPT> </head> <body> <FORM name="hogehoge" action="../../cgi-bin/mihon.cgi" method="POST"> 御趣味はなんですか？<BR> <input type="radio" name="ご趣味は？" value="料理" id="a1" checked> <label for="a1">料理</label><br> <input type="radio" name="ご趣味は？" value="昼寝" id="a2"> <label for="a2">昼寝</label><br> <input type="radio" name="ご趣味は？" value="運動" id="a3"> <label for="a3">運動</label> <BR> <BR> ○○チェックリスト<BR> 該当するものにチェックを入れて下さい。<br> <INPUT type="checkbox" name="チェック1" value="○" id="a1" onclick="chg()">項目1<BR> <INPUT type="checkbox" name="チェック2" value="○" id="a2" onclick="chg()">項目2<BR> <INPUT type="checkbox" name="チェック3" value="○" id="a3" onclick="chg()">項目3<BR> <BR>現在のチェック数は… <INPUT size="25" type="text" name="tBox"><BR> <input type="submit" value="送信する"> </FORM> </body> 複数の質問がある場合、チェック数を表示させるのはムリがあるのでしょうか。 チェック項目は30近くあり、どのくらいチェックしているのか回答者が分かると とても便利なので諦めずにおります。。。 ダメでもともとですが、よろしくお願いいたします。

  • チェックボックスのチェックした項目の名前を取得したいです。

    チェックボックスのチェックした項目の名前を取得したいです。 HTML+Javascript+CGIでアンケートフォームを作っています。 送信ボタンを押したときに確認画面を表示させたいのですが、チェックボックスの項目をどう扱って良いのかわかりません。 性別を選択するラジオボタンの値の取得（男をチェックしたか、女をチェックしたか）は sex = document.mailform.sex[0].checked ? document.mailform.sex[0].value : document.mailform.sex[1].value このように出来るとのことですが、チェックボックスはどうしたら良いのでしょうか？ 好きな食べ物を聞くチェックボックスで、選択項目に ・リンゴ・バナナ・ミカン・イチゴ を用意し、チェックされた項目を 好きな食べ物：リンゴ イチゴ の用に出力したいと思っています。 よろしくお願いします。

  • 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip

    選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • CGI（Perl）内での必須項目チェック

    CGI（Perl）内で必須項目のチェックを行うところで 書き方が分からず困っています。 フォームページHTMLファイルにラジオボタンで選択ボタンが２つとテキストエリアが３つあります。 ラジオボタンのnameは、携帯電話。 valueの１つ目は "1"、2つ目は ""(空白)。 テキストエリアの 1つ目のnameは、"携帯1"。2つ目のnameは、"携帯2"。3つ目のnameは、"携帯3"。 ラジオボタンのvalueが"1"の場合は、テキストエリア全てに項目が入っていないとエラーメッセージが出るチェックを作りたいのです。 説明が分かりづらいかもしれないのですが、お力をお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CGI
  • 最も多くチェックされた項目を調べる

    javascriptで最も多くチェックされた項目を調べて それぞれのページに分岐するようにしたいです。 以下はサンプル <form onSubmit="return color(this)"> 好きな動物は？ <label><input type="radio" name="q1" value="A">うさぎ</label> <label><input type="radio" name="q1" value="B">カメ</label> <label><input type="radio" name="q1" value="C">イルカ</label> <label><input type="radio" name="q1" value="D">くま</label> 好きな場所は？ <label><input type="radio" name="q2" value="A">空</label> <label><input type="radio" name="q2" value="B">森</label> <label><input type="radio" name="q2" value="C">海</label> <label><input type="radio" name="q2" value="D">畑</label> 好きな食べ物は？ <label><input type="radio" name="q3" value="A">豆腐</label> <label><input type="radio" name="q3" value="B">ブロッコリー</label> <label><input type="radio" name="q3" value="B">なす</label> <label><input type="radio" name="q3" value="D">ハンバーグ</label> <input value="診断"> </form> 答えは以下のようにしたいです。 Aにもっとも多くチェックされた=あなたは白が好き Bにもっとも多くチェックされた=あなたは緑が好き Cにもっとも多くチェックされた=あなたは青が好き Dにもっとも多くチェックされた=あなたは茶色が好き これはどういった計算で書けばいいのでしょうか？ 本やネットを探してみましたが自分ではわかりませんでした。 初歩的な質問かもしれませんが何かヒントをくれると幸いです。

  • radioをクリックするとSubmitを表示

    現在フォームを作成しています。 ちょっとした確認セクションを作りたいと思っています。 ラジオチェックをクリックするとwindow.comfrimが表示され「送信を希望されますか？」という確認を表示し、OKをクリックするとフォームの下に送信ボタンの<input type="submit" value="送信">が表示されるようにしたいと考えています。 自力で書いたソース： <javascript> function check(){ if(window.confirm('送信を希望しますか？')){ //ここでSubmitを表示さるプロセス？ } } </javascript> <input type="radio" name="check" value="1" onClick="check()">送信希望 よろしくお願いします。

  • checkboxにチェックを入れると項目が表示される

    教えて下さい。 チェックボックスにチェックを入れると、idやclassで指定されている範囲をjavascriptでリアルタイムに表示させたいのですが、どのようにすればよいでしょうか？ 例えば、AというチェックボックスとBというチェックボックスがあって↓ <form name="000"> <input type="checkbox" id="chk1" />チェック1 <input type="checkbox" id="chk2" />チェック2 </form> チェックが入ると、指定した任意のid属性が表示されるようにしたいんです。 例えば、チェック1のチェックボックスにチェックが入ったら"forChk1"を、チェック2にチェックが入ったら"forChk2"みたいな。 <span id="forChk1">チェック1に関する項目</span> <span id="forChk2">チェック2に関する項目</span> javascriptのonClickで実現する方法になるのでしょうか？ どなたかご教授頂けると光栄ですm(_ _)m

  • Javascriptでフォーム項目を変化させたい

    タイトル通りなのですが、Javascriptを利用して『入力するフォーム項目を変化させたい』と考えています。 参考になるページを探そうと思い検索しても、javascriptを勉強しはじめて間もない私が読めるようなページにHITしなくて(検索のワード選定が出来てないかもしれませんが…)困っています。 今回したいことは、 A・B・Cというラジオボタン(チェックボックス)があり、 <input type="radio" name="select" value="patarn_a">A <input type="radio" name="select" value="patarn_b">B <input type="radio" name="select" value="patarn_c">C Aにチェックを入れるとAに対応する入力項目(例えば項目1・項目2・項目3)が記入できるようになり、Bにチェックを入れると、Bに対応する入力項目(例えば項目1・項目3・項目4)が記入できるようになり、Cにチェックを入れると、Cに対応する入力項目(例えば項目2・項目5・項目6)が記入できるようにしたい、のです。 で、送信ボタンを押した時にA・B・Cのどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 もし、お手すきの方がいらっしゃいましたら、どなたかご教授頂けないでしょうか？

  • ジャバスクリプト　入力項目チェック

    アンケートフォームを作成していて、入力必須項目とそうでないのがあります（そうでないものはすべてテキストエリア）。 必須項目は ・テキスト入力 ・4つのラジオボタンの中から1つを選ぶ ・プルダウンから1つを選ぶ があります。 テキスト入力では、電話番号、郵便番号、メールアドレス、の正規入力（半角英数で、@抜けチェック）を促したいのです（必須項目で未入力、未選択、誤表記があった場合、エラー画面が出るように）。 なかななかこれらの条件を満たしたジャバスクリプトソースを公開しているところがなくて困っています。 独学するにはちと時間がなく、あちこちのサイトをあたっているのですが、部分的には成功してもなかなか全部スッキリ決まりません。 どなたかお教えくださる方、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する