- ベストアンサー
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のどこにチェックが入っているのか、それからその対応項目に入力された値をデータとして送りたいのですが、どうにも方法が分かりません。 もし、お手すきの方がいらっしゃいましたら、どなたかご教授頂けないでしょうか？
- atsuya192
- お礼率39% (29/74)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
補足 e.disabled = ! (r[i] && o.checked); の部分、中途半端な対応なので、むしろ e.disabled = ! r[i]; だけの方がいいですね。チェックボックスじゃなくラジオだし。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
ラジオボタンで、記入可能部分を変更するだけならクラスで さらっとやってしまうのが簡単。 ただしクラス名の付け方には注意が必要ですが・・・ <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>
お礼
yambejpさんも本当に丁寧に有難うございましたm(_ _)m こちらも動作確認致しました。 希望通りに動作しまして感動でした。 返答が遅れてしまって申し訳ありませんでした。
- sugartax
- ベストアンサー率50% (22/44)
とりあえず 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 新規構築する荒業もありますが・・・。
お礼
迅速・丁寧な回答ありがとうございましたm(_ _)m 確認などに手間取りまして、返しが遅くなってしまい申し訳ありませんでした。希望通りの機能で本当に光栄です。