• ベストアンサー

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のどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 もし、お手すきの方がいらっしゃいましたら、どなたかご教授頂けないでしょうか?

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

  • ベストアンサー
  • sugartax
  • ベストアンサー率50% (22/44)
回答No.2

補足 e.disabled = ! (r[i] && o.checked); の部分、中途半端な対応なので、むしろ e.disabled = ! r[i]; だけの方がいいですね。チェックボックスじゃなくラジオだし。

atsuya192
質問者

お礼

迅速・丁寧な回答ありがとうございましたm(_ _)m 確認などに手間取りまして、返しが遅くなってしまい申し訳ありませんでした。希望通りの機能で本当に光栄です。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

ラジオボタンで、記入可能部分を変更するだけならクラスで さらっとやってしまうのが簡単。 ただしクラス名の付け方には注意が必要ですが・・・ <script> function change(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="text") f[i].disabled=!f[i].className.match(obj.value); } } </script> <form> <p> <input type="radio" name="select" value="A" onclick="change(this)">A <input type="radio" name="select" value="B" onclick="change(this)">B <input type="radio" name="select" value="C" onclick="change(this)">C<br> 1:<input type="text" disabled class="A B"><br> 2:<input type="text" disabled class="A C"><br> 3:<input type="text" disabled class="A B"><br> 4:<input type="text" disabled class="B"><br> 5:<input type="text" disabled class="C"><br> 6:<input type="text" disabled class="C"><br> </p> </form>

atsuya192
質問者

お礼

yambejpさんも本当に丁寧に有難うございましたm(_ _)m こちらも動作確認致しました。 希望通りに動作しまして感動でした。 返答が遅れてしまって申し訳ありませんでした。

  • sugartax
  • ベストアンサー率50% (22/44)
回答No.1

とりあえず UI 部分の動作的なものだけ。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <script> var RELATIONS = { 'patarn_a' : { 'ab' : true, 'bc' : false, 'ca' : true }, 'patarn_b' : { 'ab' : true, 'bc' : true, 'ca' : false }, 'patarn_c' : { 'ab' : false, 'bc' : true, 'ca' : true } }; function iswitch(o){ var e = null; var r = RELATIONS[o.value]; for(var i in r){ if(r.hasOwnProperty(i)){ e = document.getElementById(i); if(e){ e.disabled = ! (r[i] && o.checked); } } } } function isubmit(){ alert('普通に送るだけでも・・・'); document.getElementById('form').submit(); } </script> </head> <body> <form action="" method="post" id="form"> <input type="radio" name="select" value="patarn_a" onclick="iswitch(this);" />A <input type="radio" name="select" value="patarn_b" onclick="iswitch(this);" />B <input type="radio" name="select" value="patarn_c" onclick="iswitch(this);" />C <br /> <input type="text" name="ab" id="ab" value="" />AとBで有効<br /> <input type="text" name="bc" id="bc" value="" />BとCで有効<br /> <input type="text" name="ca" id="ca" value="" />CとAで有効<br /> <input type="button" value="送信" onclick="isubmit();"> </form> </body> </html> RELATIONS で関連性を指定してやり、radio の onclick で、呼び出すだけの非常に簡単なものです。 クロスブラウジングもあまり考慮してません。 >で、送信ボタンを押した時にA・B・Cのどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 これって必要?サーバサイドでなんとでもなりそうなんだけど。 というかむしろサーバサイドでやるべきですが・・・。 もしどうしてもって場合は XMLHttpRequest を用いるとスマートです。 form タグに任せずに javascript でデータを拾い集めた上で、Ajax 的な手法を用いてサーバに投げてやれば、必要なものだけのデータを送れます。 もちろん。送る際に javscript で消してしまう or 新規構築する荒業もありますが・・・。

関連するQ&A

  • 最も多くチェックされた項目を調べる

    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にもっとも多くチェックされた=あなたは茶色が好き これはどういった計算で書けばいいのでしょうか? 本やネットを探してみましたが自分ではわかりませんでした。 初歩的な質問かもしれませんが何かヒントをくれると幸いです。

  • javascriptで複数の計算を同時にしたい

    いろいろ調べたのですが私の頭では%を含む書き方がわからず困っています。 具体的にやりたいことは以下です (aに入力された数字+aの5%)+bに入力された数字÷cで選択された数字+最後に10を足して、答えをdに表示 小数点以下は切捨てor切り上げどちらでもかまいませんが、表示されないようにしたいです。 <input name="a" value=""> <input name="b" value=""> <input type="radio" name="c" value="2"> <input type="radio" name="c" value="4"> <input type="radio" name="c" value="7"> <input type="radio" name="c" value="9"> <input onclick=clac() value="計算" type=button> <input name="d" 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 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。

  • 複数のチェックボックス項目があり、そのチェック状態によって

    複数のチェックボックス項目があり、そのチェック状態によって 処理を分岐したいのですが、スマートなjavascriptの書き方が あれば教えてください! 【例】 <input type="checkbox" name="koumokuA" value="A1" /> <input type="checkbox" name="koumokuA" value="A2" /> <input type="checkbox" name="koumokuA" value="A3" /> <input type="checkbox" name="koumokuA" value="A4" /> <input type="checkbox" name="koumokuA" value="A5" /> <input type="checkbox" name="koumokuB" value="B1" /> <input type="checkbox" name="koumokuB" value="B2" /> <input type="checkbox" name="koumokuB" value="B3" /> <input type="checkbox" name="koumokuB" value="B4" /> <input type="checkbox" name="koumokuC" value="C1" /> <input type="checkbox" name="koumokuC" value="C2" /> <input type="checkbox" name="koumokuC" value="C3" /> <input type="checkbox" name="koumokuC" value="C4" /> もし【koumokuA】のA2とA3、【koumokuB】のB1とB4が選択された場合 同項目ではor条件、他項目ではand条件で処理したいので 考え方としては、 if(koumokuA=="A2" || koumokuA=="A3"){ if(koumokuB=="B1" || koumokuB=="B4"){ 実行内容 } } こんな感じなのですが、 実際にはチェックボックスの値は配列になるのでこのスクリプトでは動かない点と 効率よく複数のチェックボックスの選択結果を判定して、スクリプトを実行する 組み方があればご教授ください。 実行結果は、データが格納された配列の中から、選択項目に対応したデータを 表示するようにしたいのです。 よろしくお願いします。

  • 他フォームの入力データの引継ぎ

    入力フォームを2つ用意し 第1フォームの入力欄の1部を第2フォームの入力欄のデータとして submitさせたいのですが <INPUT TYPE="radio">と<SELECT>の入力値がうまく引継げません。 下記のようなJavaスクリプトとHTMLなのですが Javaスクリプトで「value」を=にすると 「radio」のほうはundefin、 「SELECT」で複数選択した場合は、一つ目の選択肢のみしか 引継げませんでした。 Javaスクリプトでうまくいく方法がありましたら ご教示ください。 ----Javaスクリプト-------------------------------- function aaa() { document.FROM2.A.value = document.FROM1.A.value; document.FROM2.B.value = document.FROM1.B.value; document.FROM2.C.value = document.FROM1.C.value; document.FROM2.submit(); } ----HTML-------------------------------- <FORM NAME="FROM1" METHOD="POST" ACTION="***"> <SELECT NAME="A" MULTIPLE> <OPTION VALUE="aa">セレクトa <OPTION VALUE="bb">セレクトb <OPTION VALUE="cc">セレクトc <OPTION VALUE="dd">セレクトd </SELECT> <INPUT TYPE="radio" NAME="B" VALUE="" CHECKED>選択なし <INPUT TYPE="radio" NAME="B" VALUE="1" CHECKED>ラジオ1 <INPUT TYPE="radio" NAME="B" VALUE="2" CHECKED>ラジオ2 <INPUT TYPE="text" NAME="C"> <INPUT TYPE="text" NAME="D"> <INPUT TYPE="submit" NAME="OK_BTN" VALUE="OK"> </FORM> <FORM NAME="FROM2" METHOD="POST" ACTION="***"> <INPUT TYPE="hidden" NAME="A"> <INPUT TYPE="hidden" NAME="B"> <INPUT TYPE="hidden" NAME="C"> <INPUT type="button" onClick="JavaScript:aaa();" name="OK_BTN" value="OK"> </FORM>

  • フォームに入力したデータの受け渡しについて

    左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか? 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト:</br> <input type="text" name="aaa" /></br> ラジオ:</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック:</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目:</br> <select name="ddd"> <option>A</option> <option>B</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" />  <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。

  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか? 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0~4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------

  • JavaScript フォームでのラジオボタン制御

    JavaScript初心者です。 <input name="sample1" value="左ラジオボタン" checked="checked" type="radio"> 左ラジオボタン <input name="sample1" value="右ラジオボタン" type="radio">右ラジオボタン 右ラジオボタンをクリックした場合に下記のラジオボタンをクリックできる <input name="sample2" value="1" type="radio">1 <input name="sample2" value="2" type="radio">2 <input name="sample2" value="3" type="radio">3 <input name="sample2" value="4" type="radio">4 上記のように右ラジオボタンにチェックした時だけ1~4のラジオボタンをクリックできるように制御 したいのですがどのように書いて言ったらいいのか困っています。 $(function() { $("[name='sample1']").click(function(){ var num = $("[name='sample1']").index(this); if(num == 1){ $("[name='sample1']").attr("disabled", false); } else { $("[name='sample1']").attr("disabled", true); } }); }); 上記のようにしてみたのですがここからどう下のラジオボタンを操作させるようにしていったらいいのかわかりません。 詳しい方どなたかご教示頂けないでしょうか? 宜しくお願い致します。

  • フォームで入力項目を全て別の確認画面に出したい

    JavaScriptでフォームを作成しています。 入力項目を別の確認画面に出したいのですが 組み合わせている内に、わからなくなってしまいました。どうかお助けください。(>_<) チェックボックスの所は、3つ以上チェックできないようにしてあります。 1.別ウィンドウ確認画面が出て確認する 2.OKならメールアドレスに送信&ありがとうございましたページへ(確認画面は閉じる) のようにしたいのですが、よろしくお願い致します。m(_ _)m ※尚、初心者の為何か失礼があったらすみません。 スクリプトでは足りない個所があるので、htmlを載せさせて頂きました。 ************************************************ <form name="myFORM" onClick="return check()"> <table> <tr><td> <table> <tr> <td> <input type="radio" name="plan" value="A"> A.</font></strong></div> </td> </tr> </table> <br> <table> <tr> <td> <input type="radio" name="plan" value="B"> B. </td> </tr> </table> <br> <table> <tr> <td>あ</td> <td> <input name="CB1" type="checkbox" id="CB12" value="あ"> </td> </tr> </table> チェックボックス全10項目中チェック3つまで<br> <br> *印は必須項目です<br> <table> <tr> <td>申込み内容</td> </tr> <tr> <td>会社名*</td> <td><input type="text" name="jimusho_name" size="30"></td> </tr> </table> テキストフォーム全9項目<br> <p>&nbsp; <input name="button" type="button" onClick="outdata();" value="送 信"> <input name="reset" type="reset" value="キャンセル">

  • ボタンを押したらラジオボタンを選択したい(サンプルソース付)

    ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか? ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>