• 締切済み

ラジオボタン選択と吐き出し方法について

<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script> function update(fm) { var output = ""; output += "依頼者:"; if (!fm.irai[4].checked) { for (var i = 0; i <= 3; i++) { if (fm.irai[i].checked) { output += fm.irai[i].value; } } } else { output += fm.hoka.value; } output += "\n"; output += "連絡先:"; output += fm.t.value; output += "\n"; output += "訪問者:"; if (!fm.houmon[4].checked) { for (var i = 0; i <= 3; i++) { if (fm.houmon[i].checked) { output += fm.houmon[i].value; } } } else { output += fm.hoka2.value; } output += "\n"; output += "連絡先:"; output += fm.t2.value; output += "\n"; fm.yoyaku.value = output; } </script> </head> 依頼者・訪問者共にhtml部分は以下の形式です。 <Tr> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="本人">本人 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="奥さま">奥様 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="お嬢さま">娘 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="ご子息さま">息子 </Td> </Tr> <Tr> <Td ColSpan="4"> <input type="radio" name="irai">その他 <input type="text" size="21" name="hoka"> </Td> </Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者の連絡先</B> </Td> </Tr> <Tr> <Td Valign="top"> 番号:<input type="text" size="27" name="t"> </Td> </Table> 訪問者はnameがhoumon、電話番号のnameがt2となっています。 依頼者:「依頼者」選択内容 連絡先:(依頼者の連絡先) 訪問者:「訪問者」選択内容 連絡先:(訪問者の連絡先) と吐き出されるようになっているのですが、 依頼者と訪問者で同じラジオボックスを選択した場合、 訪問者の番号欄がグレーアウトし、 吐き出しエリアには「依頼者:訪問者:(選択内容)」と反映するようにしたいのですが、 そのような事は可能なのでしょうか。 ※作業手順として、依頼者選択⇒電話番号入力⇒訪問者選択となるので、 訪問者を選択した段階で、依頼者と同じであれば、上記のように動作させたい ※その他の場合は、上記のように作動せず、両方とも入力・反映するようにしたいです。 もし可能であれば、JavaScript部分をご教示頂けませんでしょうか。 よろしくお願い致します。 ※文字数制限で、ソース全体を記載する事ができませんでした… (JavaScript部分は全文記載) 必要であれば、回答への補足として続きのソースを記載させて頂きます。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

function update(fm)もそのまま活かすんだから、 if(check){ for(var i=0;i<fm.elements["houmon"].length;i++) fm.elements["houmon"][i].disabled = "disabled"; fm.elements["hoka2"].disabled = "disabled"; fm.elements["t2"].disabled = "disabled"; fm.elements["yoyaku"].value = "依頼者:訪問者:" + target.value + "\n連絡先:" + fm.elements["t"].value; for(var i=0;i<fm.elements["houmon"].length;i++) fm.elements["houmon"][i].checked = ""; }else{ ..... にしとかなきゃ.. 失念してた

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

そのフォーム<form>に<form onclick="hoge(event,this);">とonclickを付けられるなら。 あなたのupdate(fm)はそのままにして、 function hoge(event,fm){  var target = event.target || event.srcElement;  var check = false;  if(target.name == "irai"){    for(var i=0;i<fm.elements["houmon"].length;i++)    fm.elements["houmon"][i].disabled = "";    fm.elements["hoka2"].disabled = "";    fm.elements["t2"].disabled = "";  }  if(target.name == "houmon"){   for(var i=0;i<fm.elements["irai"].length;i++){    if(fm.elements["irai"][i].value == target.value      && fm.elements["irai"][i].checked)    check = true;   }   if(check){    for(var i=0;i<fm.elements["houmon"].length;i++)    fm.elements["houmon"][i].disabled = "disabled";    fm.elements["hoka2"].disabled = "disabled";    fm.elements["t2"].disabled = "disabled";    fm.elements["yoyaku"].value = "依頼者:訪問者:" + target.value    + "\n連絡先:" + fm.elements["t"].value;   }else{    for(var i=0;i<fm.elements["houmon"].length;i++)    fm.elements["houmon"][i].disabled = "";    fm.elements["hoka2"].disabled = "";    fm.elements["t2"].disabled = "";   }  } } を追加すべし.. 注:全角空白でインデントしてます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

function update(fm)がいつ呼ばれるのか書いてないですが、おそらくサブミットの時だとするとするとこのやり方では無理ですよね、入力してる途中で判定する必要があるわけですからDOMイベントを使って、チェックした人が、依頼者と同じか判定して、houmonの方をdisableにして、outputの中身はiraiの方を使う処理に書き換えればよいでしょう。簡単だと思います。 DOMイベントの取得がよくわからなければ、とりあえずはイベント属性(onclick)でも訪問のラジヲボタンにつけとけばあ...

関連するQ&A

  • 以下ソースのJavaScript部分をご教示下さい

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script> </script> </head> <form action=""> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者</B> </Td> </Tr> <Tr> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="本人">本人 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="奥さま">奥様 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="お嬢さま">娘 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="ご子息さま">息子 </Td> </Tr> <Tr> <Td ColSpan="4"> <input type="radio" name="irai">その他 <input type="text" size="21" name="hoka"> </Td> </Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者の連絡先</B> </Td> </Tr> <Tr> <Td Valign="top"> 番号:<input type="text" size="27" name="t"> </Td> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="1"> </Td><Td>日時確認</Td></Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="2"> </Td><Td>依頼内容確認</Td></Tr> </Table> <textarea name="yoyaku" value="" rows="5" cols="28"> </textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html> 「内容反映」を押すと、テキストエリアに以下の様に吐き出され、 リセットで入力内容・テキストエリア共にリセットしたいです。 チェックボックスの2つについては、確認だけですので、 吐き出す必要はありません。 ◆反映内容◆ 依頼者:(irai選択内容が反映) 連絡先:(tに入力した内容が反映) 宜しくお願い致します。

  • ラジオボタン選択で「複数ラジオボタン」をアクティブにするには?

    ■下記サンプルソースのラジオボタンの「はい」を選択すると複数のラジオボタンがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」で複数ラジオボタンはグレーで選択無効) 用途はアンケートフォームです。 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form2" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、ラジオボタン(カテゴリー1~4)がアクティブになる。 </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">カテゴリー1 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー2 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー3 <input name="radiobutton" type="radio" value="radiobutton">カテゴリー4 </td> </tr> </table> </form>

  • チェックボックスやラジオボタンでの計算

    チェックボックスや、ラジオボタンで、選択した項目の金額を、最後にテキストフォームに表示させる…というやり方を探しております ソース途中からですが…↓ <tr> <Td Valign="middle" Width="80">部数選択</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="radio" Name="pay" Value="100部 10000円">100部 ¥10,000円<Br> <Input Type="radio" Name="pay" Value="150部 20000円">150部 ¥20,000円<Br> <Input Type="radio" Name="pay" Value="200部 30000円">200部 ¥30,000円<Br> <Input Type="radio" Name="pay" Value="300部 40000円">300部 ¥40,000円<Br> <Input Type="radio" Name="pay" Value="300部以上 ※お見積もりいたします">300部以上 ※お見積もりいたします<Br> </td> </tr> <tr> <Td Valign="middle" Width="80">オプション選択<Br>(複数選択可)</td> <Td Align="center" Valign="middle"><必須></td> <Td> <Input Type="checkbox" Name="op[]" value="地図を入れる">地図を入れる<Br> <Input Type="checkbox" Name="op[]" value="先生のプロフィールを入れ">先生のプロフィールを入れる<Br> <Input Type="checkbox" Name="op[]" value="ごあいさつを入れる">ごあいさつを入れる<Br> <Input Type="checkbox" Name="op[]" value="生徒募集中を入れ">生徒募集中を入れる<Br> <Input Type="checkbox" Name="op[]" value="写真を入れる">写真を入れる<Br> <Input Type="checkbox" Name="op[]" value="ゲスト紹介">ゲスト紹介<Br> <Input Type="checkbox" Name="op[]" value="QRコード">QRコード<Br> </td> </tr> といった感じです。 value はすでに、他のところで使用しています 単純に計算だけを目的とさせているんですが、どうしたら良いでしょうか?

  • ラジオボタンでの表示の切替方法

    2つのラジオボタンの切替によって、表示の切替を行いたいです。 例えば、Aを選択すると(1)の入力フォームが表示され、Bを選択すると(2)が表示したいです。初期表示はAが選択された時と同じ内容となります。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td><form name="Quick1"> <tr><td>選択</td> <td> <input type="radio" name="A" value="1" checked>A  <input type="radio" name="B" value="2">B  </td></tr> <tr> <td>(1)</td> <td> <input type="text" size="6" maxlength="5" name="text1" value="">- <input type="text" size="6" maxlength="5" name="text2" value="">- <input type="text" size="6" maxlength="5" name="text3" value=""> </td></tr> <tr> <td>(2)</td> <td> <input type="text" name="text7" size="43" value=""> </td></tr> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

  • ラジオボタン選択でtextfieldをアクティブにするには?

    ■下記サンプルソースのラジオボタン「はい」を選択するとtextfieldがアクティブになるJavaScriptがわからず困っております。教えて頂けないでしょうか。 (ページ開いた際は「いいえ checked」でtextfieldはグレーで入力無効) 可能であればシンプルなソースで「最新のWinIE、MacSafari」に対応していると非常に助かります。先輩方よろしくお願いします。 <form name="form1" method="post" action=""> <table> <tr> <td>■「はい」を選択すると、textfield(カテゴリー1~4)がアクティブになる</td> </tr> <tr> <td> <input name="radiobutton" type="radio" value="radiobutton">はい  <input name="radiobutton" type="radio" value="radiobutton" checked>いいえ </td> </tr> <tr> <td> カテゴリー1<input name="textfield" type="text" size="30" maxlength="30"> <br> カテゴリー2 <input name="textfield22" type="text" size="30" maxlength="30"> <br> カテゴリー3 <input name="textfield32" type="text" size="30" maxlength="30"> <br> カテゴリー4 <input name="textfield42" type="text" size="30" maxlength="30"> </td> </tr> </table> </form>

  • ラジオボタンを複数選択して、リンクへ飛ぶ

    初心者です。これだと、二つのネームしか選択できないのですが、三つ、四つにに増やすにはどうしたらいいのでしょうか? <script language="javascript"><!-- //リンク先の設定(URL) al=new Array(); al[0]="http://yahoo.co.jp/";//A+D al[1]="http://google.co.jp/";//A+E al[2]="http://www.goo.ne.jp/";//A+F al[3]="";//A+G al[4]="";//B+D //(略) al[11]="";//C+G(※この場合は0~11の値が入ります) function xLunch(){ aUe = document.getElementsByName("ue"); aSita =document.getElementsByName("sita"); for(i=0;i<aUe.length;i++){ if(document.getElementsByName("ue")[i].checked==true){ nUeSel=i; break; } } for(i=0;i<aSita.length;i++){ if(document.getElementsByName("Sita")[i].checked==true){ nSitaSel=i+1; break; } } nC = (aSita.length*nUeSel)+nSitaSel; location.href=al[nC-1]; } --> </script> <table border="1"> <tbody> <tr> <td>一つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="ue" checked>A <input type="radio" name="ue">B <input type="radio" name="ue">C</td> </tr> <tr> <td>二つ目を選択してください。</td> </tr> <tr> <td><input type="radio" name="sita" checked>D <input type="radio" name="sita">E <input type="radio" name="sita">F <input type="radio" name="sita">G </td> </tr> <tr> <td align="right"><input type="button" value=" OK " onclick="xLunch()"></td> </tr> </tbody> </table>

  • アンケートをCSVに落とした時の並び順

    以下のHTMLのようなアンケートフォームを作っています. CSVに落とした時の並びを変えたいのですが,どなたかお知恵を貸していただけませんでしょうか. 記事1~3,それぞれのランクA~Eを選んだ後,BestとWorstを決定するものです. 今の状態だとCSVには,「name=○」の順番でいうと↓このように並びます. 記事10-1 11Best 12Worst 記事10-2 記事10-3 11-1 11-2 12-1 12-2 これを↓このように並んでCSVに落としたいのです. 記事10-1 記事10-2 記事10-3 11Best 11-1 11-2 12Worst 12-1 12-2 <table> <tr><td colspan="3" valign="top">記事1</td></tr> <tr> <td valign="top"> <label for='1_1'>  <input type=radio name="記事10-1" value="a" id='1_1'>A</label> <label for='1_2'><input type=radio name="記事10-1" value="b" id='1_2'>B</label> <label for='1_3'><input type=radio name="記事10-1" value="c" id='1_3'>C</label> <label for='1_4'><input type=radio name="記事10-1" value="d" id='1_4'>D</label> <label for='1_5'><input type=radio name="記事10-1" value="e" id='1_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="1"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="1"></td> </tr> <tr><td colspan="3" valign="top">記事2</td></tr> <tr> <td valign="top"> <label for='2_1'>  <input type=radio name="記事10-2" value="a" id='1_1'>A</label> <label for='2_2'><input type=radio name="記事10-2" value="b" id='2_2'>B</label> <label for='2_3'><input type=radio name="記事10-2" value="c" id='2_3'>C</label> <label for='2_4'><input type=radio name="記事10-2" value="d" id='2_4'>D</label> <label for='2_5'><input type=radio name="記事10-2" value="e" id='2_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="2"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="2"></td> </tr> <tr><td colspan="3" valign="top">記事3</td></tr> <tr> <td valign="top"> <label for='3_1'>  <input type=radio name="記事10-3" value="a" id='1_1'>A</label> <label for='3_2'><input type=radio name="記事10-3" value="b" id='3_2'>B</label> <label for='3_3'><input type=radio name="記事10-3" value="c" id='3_3'>C</label> <label for='3_4'><input type=radio name="記事10-3" value="d" id='3_4'>D</label> <label for='3_5'><input type=radio name="記事10-3" value="e" id='3_5' checked>E</label> </td> <td align="center" valign="top"><input type=radio name="11Best" value="3"></td> <td align="center" valign="top"><input type=radio name="12Worst" value="3"></td> </tr> </table> <table> <tr><td valign="top">[11-1]Bestについて1</td></tr> <tr><td valign="top"><input name="11-1" type="text" value="" title="Best" size="100"></td></tr> <tr><td valign="top">[11-2]Bestについて2</td></tr> <tr> <td valign="top"> <label for='11_2a'> <input type=radio name="11-2" value="a" id='11_2a'>BestA</label> <label for='11_2b'><input type=radio name="11-2" value="b" id='11_2b'>BestB</label> </td> </tr> <tr><td valign="top">[12-1]Worstについて1</td></tr> <tr><td valign="top"><input name="12-1" type="text" value="" title="Worst" size="100"></td></tr> <tr><td valign="top">[12-2]Worstについて2</td></tr> <tr> <td valign="top"> <label for='12_2a'> <input type=radio name="12-2" value="a" id='12_2a'>WorstA</label> <label for='12_2b'><input type=radio name="12-2" value="b" id='11_2b'>WorstB</label> </td> </tr> このHTML内なのか,cgi内なのか,どこでどのように設定したらよいでしょうか. 例えば,「name="11Best"」を「name="11-0"」にすればよいとか,そのくらいで並びが変わったり・・・しませんよね. 質問もつたなくうまくお伝えできるか分かりませんが,アドバイスいただけると大変助かります. なにとぞよろしくお願いいたします.

  • メールフォームのラジオボタンフィールドの件

    ホームページメールフォーム作成でご質問しました。 ラジオボタンとチェックボックスのフィールドで、その他項目を設けてテキストフィールドを作っているます。 このテキストフィールドにもラジオボタンまたは、チェックボックスのチェックを行えるようにできないでしょうか。 ○あああ ○いいい ○ううう ○えええ ○その他 □(ここにテキスト入力フィールド) ※javascriptを作る必要があるでしょうか。 下記のソースが、現状です。 <tr><td class="item_name">設問</td> <td class="item_form"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td><input name="設問ABC" type="radio" value="Webサイト1" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト1</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト22" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト22</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト333" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト333</label></td></tr> <tr><td><input name="設問ABC" type="radio" value="Webサイト555" class="radio" id="toi2" /></td> <td valign="bottom"><label for="toi2">Webサイト555</label></td></tr> </table> <div>その他:<input type="text" name="設問ABC" style="width:280px" /></div> </td></tr>

  • ラジオボタンが選択された項目のみ操作可能

    ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled?readonly? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />A小学校<br/> <input type="checkbox" name="aa[]" value="2" />B小学校<br/> <input type="checkbox" name="aa[]" value="3" />C小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />A中学校<br/> <input type="checkbox" name="bb[]" value="2" />B中学校<br/> <input type="checkbox" name="bb[]" value="3" />C中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>