• ベストアンサー

HTMLのコンボボックスとの関連

HTMLの同ページ内にコンボボックスAとコンボボックスBがあるとして、 <!-- JavaScript部------ --> <script language="javascript"> <!--// function cmdCtr() { if (document.forms[0].A.value=='a2'){ document.forms[0].B.disabled=true; document.forms[0].B.selectedIndex=0; document.forms[0].B.value="b1"; }else{ document.forms[0].B.disabled=false; } } //--> </script> <!-- HTML部----------- --> <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとBボックスが選択出来なくなり、Bボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか? ちなみに、AボックスBボックス両方がきちんと選択されている場合はエラーは起きません。

noname#15844
noname#15844

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

  • ベストアンサー
  • Shinoa
  • ベストアンサー率92% (12/13)
回答No.4

単純にこんな感じではどうでしょう? <Form>のonSubmit時に、submitData()関数を実行させるだけです。 参考になりますか? function submitData(){ document.forms[0].B.disabled=false; } <FORM action="○○○.html" onSubmit="submitData()">

noname#15844
質問者

お礼

度々のご回答、有難う御座います。 非常に参考になります。

その他の回答 (3)

  • Shinoa
  • ベストアンサー率92% (12/13)
回答No.3

『disabled』が使いたいのでしたら、送信する直前に  document.forms[0].B.disabled=false; を実行してから送信するって言うのはどうでしょう? 一番簡単だと思うのですが、少しでも参考になれば幸いです。

noname#15844
質問者

補足

回答有難う御座いました。 送信する直前にdocument.forms[0].B.disabled=false;を実行するというのは、具体的にどのように記述すれば良いのでしょうか?送信ボタンの部分に手を加える形ですか?

  • potedora
  • ベストアンサー率47% (66/140)
回答No.2

#1です。 hiddenを使用して変数を設定すれば可能です。 例えば <input type="hidden" name="HB" value=""> のような行をFORMに追加しておき、 サーブレットへ移行するときのイベントに document.forms[0].HB.value = document.forms[0].B.value を実行すればサーブレットにはAの値とHB(=B)の値が 渡ります。 サーブレット側をA,Bにしたい場合は、hiddenをB、 ボックスをHBにすればよいと思います。

noname#15844
質問者

お礼

再びのご回答有難う御座いました。さっそく試してみます。

  • potedora
  • ベストアンサー率47% (66/140)
回答No.1

disabledをtrueにしているからだと思います。 disabledの処理を削除してやってみてください。 もし、Aでa2を選択したときにBがb1しか選択できない ようにしたいのであれば、BでもonChangeを 呼べば実現できます。

noname#15844
質問者

補足

回答有難う御座いました。 disabledは出来れば使いたいんですが無理ですか?理想としては、a2を選択時にボックスBが白黒になって操作不可能になり、その状態で送信するとサーブレットにa2とb1の二つの情報を渡せるという形です。

関連するQ&A

  • vbscriptでIE自動入力(コンボボックス選択について)

    すみません。vbsでIEのフォームに自動入力したいのです。 で、できないところがありまして質問します。 上から コンボボックスA(あ、い、う)を選べる テキストボックスB チェックボックスC というサイトです。 どうもBとCにinputタグにdisabledと書いてあり入力規制?されてます ソースBは <input type=text size="20" name="B" disabled> となってます。Cも同様です。 Aのコンボボックスを選択すると入力できるようになります。 vbsはこうしてみました。 IE.document.form.A.value="あ" 又は IE.document.form.A.selectedIndex=0 IE.document.form.B.value="か" IE.document.form.C.checked=true しかしこれではAに”あ”は入りますが、 B,Cの規制が解除されません。 (一応文字が白抜き表示で入っているように見えるでもデータとしては入力されてない)。 手動で選択すると解除されます。 Aのソースが<select style="width:10" name="A" onChange="F()"> となっているのでこのonchangeが怪しいと思っているのですが どうでしょうか。 どのようにしたらいいんでしょうか。 <script language="JavaScript" src="xxx.js"> とソースにあるのでJavaも関係あるのでしょうか。あまり良く分かってません。 ツールを使いメモリ上のソースを確認すると Aを手動で選ぶとB,Cのdisabledが消えました。 お助けください。

  • 2つのコンボボックスの連携

    以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>

  • リストボックスの条件

    下記のHtmlだと、男の子を選択すると、下2行に「-----------------」が出てくると思うのですが、項目数が異なったら見せないような方法はありますか?もしくは、JavaScriptで他の良い方法があれば教えてください。 <HTML> <HEAD> <TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--- function BYGR() { flag = document.forms[0].elements[0].value if(flag=="BOY") { document.forms[0].elements[1].options[0].text = "サッカー選手"; document.forms[0].elements[1].options[1].text = "-------------------------------------"; document.forms[0].elements[1].options[2].text = "-------------------------------------"; } if(flag=="GIR") { document.forms[0].elements[1].options[0].text = "学校の先生"; document.forms[0].elements[1].options[1].text = "ケーキ屋さん"; document.forms[0].elements[1].options[2].text = "看護婦"; } if(flag=="") { document.forms[0].elements[1].options[0].text = "男の子用・女の子用を選んでください"; document.forms[0].elements[1].options[1].text = "-------------------------------------"; document.forms[0].elements[1].options[2].text = "-------------------------------------"; } } //---> </SCRIPT> </HEAD> <BODY> <P><HR> 男の子用・女の子用の将来の夢を選択して下さい<BR> <FORM>性別 <SELECT onChange="BYGR()"> <OPTION VALUE=""> <OPTION VALUE="BOY">男 <OPTION VALUE="GIR">女 </SELECT> <P> <SELECT> <OPTION>男の子用・女の子用どちらか選んで下さい <OPTION>------------------------------------- <OPTION>------------------------------------- </SELECT> </FORM> </BODY> </HTML>

  • リストボックスを連動させて・・・その2

    直前の質問で下記の回答をいただいたものです。 質問では2つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。 ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript> <!-- strBase = "test.cgi?hinmei=denwa "; strS1 = "&s1="; strS2 = "&s2="; function set(){  strS1b = strS1  strS2b = strS2   if (document.form.s1.options[document.form.s1.selectedIndex].value)   strS1b += document.form.s1.options[document.form.s1.selectedIndex].value;  if (document.form.s2.options[document.form.s2.selectedIndex].value)   strS2b += document.form.s2.options[document.form.s2.selectedIndex].value;  strURL = strBase + strS1b + strS2b;  document.form.text.value = strURL; } //--> </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>

  • セレクトボックスの選択状態について

    セレクトボックスの横にチェックボックスがあり、 チェックボックスON→セレクトボックスはAの内容 チェックボックスOFF→セレクトボックスはBの内容 となるものがあります。 問題は、これに値を保持する機能を付けたいのです。 例えば、チェックボックスにチェックがある状態でセレクトボックスの3番目の要素を選択していたとします。そこで、チェックをはずし一度Bの内容を表示させてから、再度チェックを付けAの内容に戻した時に3番目の要素が選択されている状態にしたいです。逆の場合も同様にしたいです。アドバイスを頂けたらと思います。宜しくお願い致します。 <script type="text/javascript"> <!-- a = 0; b = 0; txt = {}; txt["A"] = new Array("設定なし","A1","A2"); txt["B"] = new Array("設定なし","B1","B2","B3"); function set(select_box,check_box){ if (document.forms[0].elements[check_box].checked) { key = "A"; b = document.forms[0].elements[select_box].options.selectedIndex; } else { key = "B"; a = document.forms[0].elements[select_box].options.selectedIndex; } while (document.forms[0].elements[select_box].options[0]){ document.forms[0].elements[select_box].options[0] = null; // セレクトボックスのメニューを消去 } for (i=0; i<txt[key].length; i++){ document.forms[0].elements[select_box].options[i] = new Option(txt[key][i],txt[key][i]); // セレクトボックスのメニューの項目を生成・表示テキストとvalue値を設定 } if (key = "A") { document.forms[0].elements[select_box].options.selectedIndex = a; } else if (key = "B") { document.forms[0].elements[select_box].options.selectedIndex = b; } } // --> </script>

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

    ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか? ※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>

  • セレクトボックスを使用した、フォームのアクティブ・非アクティブの切り替え

    セレクトボックス(A)を使用して、(A)の選択結果により(A)以降をアクティブ・非アクティブに切り替えたいのです。 アクティブ・非アクティブの切り替え自体は正常に動くのですが、一度「送信する」をクリックした後、次の画面に移動し、その後「戻る」をクリックorブラウザの戻るで元のページに戻ると、アクティブ化できていたセレクトボックス(C)が全て非アクティブとなってしまっているのです。 原因は何でしょうか?よろしくお願いいたします。 function setTF() { n = document.mail.Data.selectedIndex; flag = eval(document.mail.Data.options[n].value); document.mail["B"].disabled = flag; document.mail["C"].disabled = flag; } ※以下HTML※ <form action="mail.cgi" method="post" name="mail"> <table> <tr> <th>セレクトボックス(A)</th> <td><select name="Data" onchange="setTF()"> <option value="false">アクティブ</option> <option value="true" selected="selected">非アクティブ</option> </select></td> </tr><tr> <th>テキスト(B)</th> <td><input size="4" type="text" name="B" disabled="disabled" /> 才</td> </tr><tr> <th>セレクトボックス(C)</th> <td><select name="C" disabled="disabled"> <option>選択肢1</option> <option>選択肢2</option> </select></td> </tr><tr> <td colspan="2" class="submit"><input type="submit" value="送信する" /><input type="reset" value="リセット" /></td> </tr> </table> </form>

  • JavaScriptで書かれたOptionタグをVBAで選択する方法

    <SCRIPT language="JavaScript"> document.write("<SELECT name=aaa><OPTION value=A>1</OPTION><OPTION value=B>2</OPTION><OPTION value=C selected>3</OPTION></SELECT>") </SCRIPT> 上記のJavaScriptで書かれたOptionタグをVBAから objIE.Document.forms(0).aaa.Item(1).Selected = True と選択しても動かすことが出来ませんでした。 VBAからJavaScriptで書かれたOptionタグの選択することをしたいのですが不可能なのでしょうか?

  • フレーム内 ( 子HTML ) からフレーム外 ( 親HTML ) のコンボボックスをJavaScriptで操作する方法は?

    下記のようなHTML(抜粋)のフレーム内(子)から、フレームの外側(親)のコンボボックスの値を変更(現在は「起」が選択されていますが、例えば、これを「承」に変更)したいのですが、JavaScriptをどのように記述すればよいでしょうか? Top.Hoge ( または、Parent.Hoge ) の後の書き方がわかりません。 (手持ちの書籍は一通り調べてみたのですが、探し方が悪いのか・・・?) ご存知の方、コメントを頂けると助かります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" Content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="JavaScript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>題名</title> ........(略)........ <form name="form2"> // ↓以下、コンボボックス ( ドロップダウンリストボックス? ) <select name="Hoge" onchange="FunctionName(Args.......(略).........)"> <option value="0" selected>起 <option value="1 " > &nbsp;承 <option value="2 " > &nbsp;転 <option value="3 "> &nbsp;結 </select> </form> <tr><td colspan="3" align="center"> <iframe width="1200" height="800 "src="/........(Path)......../Hoge.html"></iframe> </td></tr>

  • セレクトボックス連動

    過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>