JavaScriptでSELECTの値でTEXTを入力可と入力不可に分ける方法

このQ&Aのポイント
  • JavaScriptで、SELECTの値に応じて、TEXT入力欄の入力可と入力不可を切り替えたいです。
  • 指定したSELECT要素の値が特定の値と一致する場合、関連するTEXT入力欄を入力不可に設定します。
  • 既存のフォームに、JavaScriptを使用して制御を追加し、SELECT要素の値に基づいてTEXT入力欄の状態を変更することができます。
回答を見る
  • ベストアンサー

JavaScriptで、SELECTの値で、TEXTを入力可と入力不可

JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

1)要素の指定が  document.formname.elemen(t)s~ でtが抜けている部分がある  document.forms("formname").elements~ としたほうが丁寧かも。 2)elementの指定で["test[value]"]としていますが、  これだと文字列:test[value]という要素を探しますので該当なしになる。  test[1]、test[2]などにしたい場合は    "test[" + value + "]" のようにしないとvalueが引数の値にならない とりあえず以上で動作すると思いますが、一度「C」を選択して、後でAなどに戻しても元に戻らないようですがそれは問題ないのでしょうか?

chobi-taro
質問者

お礼

"test[" + value + "]"の方法で上手くいきました。 一度、「C」を選択した後で「A」に戻しても、入力出来ました。 ありがとうございました!

関連するQ&A

  • オブジェクトを指定しても「Nullまたはオブジェクトではありません」となってしまう

    Webページ作成にて、セレクトボックスを選択した時に選択内容によって、 同フォーム内にある特定のラジオボタンを無効にする処理を組んでいます。 セレクトボックスの[onChange]イベントに下記の[selectChange()]が 動くように記述しているのですが、どうしても 「Nullまたはオブジェクトではありません」とエラーとなってしまいます。 オブジェクト名のタイプミスなども含め何度も見直しましたが間違いありませんでした。 ちなみに、この関数と同じ場所に、ロールオーバーイメージをプリロード させる関数も記述しているのですがそちらは問題なく動いています。 (DreamWeaverが生成してくれるものですが・・) 原因として何が考えられるでしょうか。 分かる方お力をお貸し下さい。 //特定のラジオボタンを無効にする関数 function selectChange() { var selectedNum = document.FormName.SelectBox.selectedIndex; if(selectedNum == 1) { document.FormName.RadioButton[0].disabled = false; document.FormName.RadioButton[3].disabled = true; document.FormName.RadioButton[4].disabled = true; } else if(selectedNum >= 2){ document.FormName.RadioButton[0].disabled = true; document.FormName.RadioButton[3].disabled = false; document.FormName.RadioButton[4].disabled = false; } } //セレクトボックスの記述 <select name="SelectBox" onchange="selectChange()"> <option value=""></option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select>

  • javascriptについての質問です。複数のselect等で選択した

    javascriptについての質問です。複数のselect等で選択した文字の値をinputに表示したいのですが2 こちらで <script> function changeFunc(f){ f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value; } </script> <FORM> <SELECT NAME="select1" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c">c</OPTION> </SELECT> <SELECT NAME="select2" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> というプログラムを教えていただいたのですが 最新のブラウザーではどれもが動作するのですが IE5.IE6.IE7で動かなくて困っております。 IE5は仕方ないカナとも思ってしまったりするのですが IE6 IE7では動いて欲しくて困っています。 どなたか助けていただけないでしょうか

  • セレクトボックスの項目ごとにテキストボックスの数値を参照するには??

    初心者なのにjavascriptで作ろうとしているのが 悪いのですが、完全に煮詰まっています。 助けてください。 カロリー計算なんですが、朝食・昼食など食事毎に セレクトボックスの食品項目を選択していきます。 (食品項目は、本来は数十項目あります) 次に選択された項目のグラムをテキストボックスで入力します。 そして、それを食品毎にカロリー計算して合計のカロリーを表示します。 answer=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4) が、カロリー=(ご飯*0.1)+(肉*0.2)+(魚*0.3)+(牛乳*0.4)といった感じです。 セレクトボックスのオプション項目の食品は、朝食・昼食問わず、同一です。 食品1・2は選択されない場合もあります。 もっと簡単に作れる入力書式などの変更も考えましたが、 諸事情により、この方式の入力・結果表示が必要なんです。 なにぶんボランティアサークルで予算も何もなくHP作成を外部に 依頼するのも不可能です。 少し出来る人が作っている程度です。 他に頼る人もいないので、出来なければ諦めざるえない状況なんで 今、本を読みながら独学で作っています。 どうかお助けください。 厚かましいですが、よろしくお願いします。 <HEAD> <SCRIPT language="JavaScript"> function calc(){ var A = var B = var C = var D = var E = document.f1.answer.innerText = (A*0.1)+(B*0.2)+(C*0.3)+(D*0.4); } window.onload=calc; </SCRIPT> </HEAD> <BODY> <form id="f1"> 計算結果の計算式<BR> 【カロリー(answer)=(A*0.1)+(B*0.2)+(C*0.3)+(D*0.4)】<BR> カロリー<INPUT size="20" type="text" name="answer"><BR> <BR> 朝食<BR> 食品1<SELECT name="s11"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s12"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> <BR> 昼食<BR> 食品1<SELECT name="s21"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR> 食品2<SELECT name="s22"> <OPTION value="0" selected>選択項目</OPTION> <OPTION value="1">ご飯</OPTION> <OPTION value="2">肉</OPTION> <OPTION value="3">魚</OPTION> <OPTION value="4">野菜</OPTION> <OPTION value="5">牛乳</OPTION> </SELECT> 左で選択した項目のグラム<INPUT size="10" type="text" value="0" onchange="calc()" ><BR>  </FORM> </BODY>

  • セレクトで選んだ数の計算方法

    初心者なので基本的な質問ですが、よろしくお願いします。 セレクトで選んだ数値が2つあり、その積を表示したいのです。 どうしたらよいでしょうか。 </script> <script langauage="JavaScript"> <!-- function calcNum(){ var num1 = parseInt(document.getElementById('s1').value); var num2 = parseInt(document.getElementById('s2').value); var kei = num1 * num2; } //--> </script> </head> <body> <form name="form1"> <select size="1" name="select2" id="s2" onchange="selectChange()"> <option value="5"> 5</option> <option value="9"> 9</option> </select> </form> <form name="form1"> <select size="1" name="select1" id="s1" onchange="selectChange()"> <option value="2"> 2</option> <option value="12">12</option> </select> </form> <input type="text" name="kei" size="10">  <input type="button" value="計算" onmousedown="calcNum()"> スクリプトのところだけの抜粋でわかりにくいかもしれないのですが、 どのようにしたら良いか、教えてください。 根本的に違っているようでしたら、どうやればよいのか教えてください。 よろしくお願いします

  • JavaScriptのSELECTの値について

    JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で10ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。

  • INPUTで入力された値やSELECTで選択された値の取得

    以下のようなHTMLで出力されるページにおいて入力された値を取得したいと思っております。 <div id="div1"> 現在<input type="text" name="TXT1" id="TXT1" size="10">が入力されています。 <br> 現在<select size="1" name="SLCT1" id="SLCT1"> <option>項目1</option> <option>項目2</option> <option>項目3</option> </select>が選択されています。 </div> 値を取得するには v1 = document.getElementById("TXT1").value で取得できるのはわかっているのですが たとえば、TXT1に「文字列1」を入力し、SLCT1で「項目2」を選択している状態で、 "現在文字列1が入力されています。現在項目2が選択されています。" のようにDIV1の中に表示されている文字列全体を取得することはできるのでしょうか。 IEでinnerTEXT、FirefoxでtextContentを利用して取得を試みたのですが、うまくいきません。 何かいい方法があればご教授願えますでしょうか。 現在想定している状況ですと、DIVの中に配置されるINPUTやSELECTの数なども不定でして、それら要素のidも不定であります。 よろしくお願いいたします。

  • JavaScriptの入力制御がうまく働きません。

    JavaScriptでフォームの入力制御を行い、POSTされた値をPHPで精査して表示するコードを書いたのですが、下の例の「フード」で「その他」以外を選択するとまったく何も表示されません。ちなみにPHPのdisplay_errorsを.htaccessでOnにしてもエラーは表示されず、またJavaScriptをOFFにすると正常に表示されることから、PHPのコードではなく、JavaScriptのtxt.value=""; の部分に問題があると思われます。ですが、いろいろ調べましたが手詰まりになりました。 PHPとJavaScriptの双方にお詳しい方、どうかご教授くださいますようお願いいたします。 以下、問題のコードです。長くて申し訳ありませんm(_ _)m <script type="text/javascript"> function zzz(list,txt){ if (list.value == "その他"){ txt.disabled=false; }else{ txt.value=""; txt.disabled=true; } } </script> <?php if(!isset($_POST['pet'])){ ?> <body onload="zzz(document.getElementById('pet'),document.getElementById('petOther')),zzz(document.getElementById('food'),document.getElementById('foodOther'))"> <form method="post" action="test.php"> ペット: <select name="pet" id="pet" onchange="zzz(this,document.getElementById('petOther'))"> <option value="" selected="selected">↓</option> <option value="犬">犬</option> <option value="猫">猫</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="petOther" value="" size="20" id="petOther" />) <br /> フード: <select name="food" id="food" onchange="zzz(this,document.getElementById('foodOther'))"> <option value="" selected="selected">↓</option> <option value="缶詰">缶詰</option> <option value="ドライフード">ドライフード</option> <option value="その他">その他</option> </select> (⇒<input type="text" name="foodOther" value="" size="20" id="foodOther" />) <button class="submit" type="submit"><span class="submitBTN">送信内容確認画面へ進む</span></button> </form> <?php }else{ print "<body>\n"; foreach($_POST as $key => $val){ if($key == "pet"){ if($val != "その他"){ $pet = $val; } } if($key == "petOther"){ if(!empty($val)){ $pet = $val; } } if($key == "food"){ if($val != "その他"){ $food = $val; } } if($key == "foodOther"){ if(!empty($val)){ $food = $val; } print $pet."に".$food."を与える"; } } } ?> </body> </html>

  • selectのnameが配列の場合

    説明がわかりにくいかもしれませんがよろしくお願いいたします。   セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり1つだけの場合は成功しました。 しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか? 現在以下のようにソースを書いて失敗しています。 ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい

  • プルダウンで別項目に値を代入したい(HTML SELECT)

    ホームページのプルダウン項目を選択すると直ぐ下にあるテキスト項目に値を設定するプログラムを作りたいのですが上手くいきません。 HTMLのSELECT句でonchange属性に記述するのは分りますが、その場合にはjavascriptで記述(例:onchange="fncSet();"等)します。 下記は記述を省略しましたが、option項目はDBのテーブルから読み込んでセットしています。 <select name=sel onchange="???">  <option value=" "> </option>  <option value="1">はい</option>  <option value="2">いいえ</option> </select> <input type=text name=txt value=""> この場合にselのonchangeで選択した項目の値をtxtに設定するにはどうすればいいのでしょうか? OS   :WIN2K ブラウザ :IE6 プログラム:HTML(asp,vbscript,javascript)

    • ベストアンサー
    • HTML
  • セレクトメニューで複数選択した値をpost送信する

    セレクトメニューで下のように、「multiple」を使えばカテゴリA~カテゴリDまでを全て選択する事ができますが、 <form method="post" action="test.php"> <select multiple name="category"> <option value="category_a">カテゴリA</option> <option value="category_b">カテゴリB</option> <option value="category_c">カテゴリC</option> <option value="category_d">カテゴリD</option> </select> </form> そうではなくて、下のように「すべてのカテゴリ」という項目を作って、カテゴリA~カテゴリDまでの値をPOST送信したいのですが、どのように記述すればよいのか四苦八苦しております。 <form method="post" action="test.php"> <select name="category"> <option value="?">すべてのカテゴリ</option>⇒この部分が解らない箇所です。 <option value="category_a">カテゴリA</option> <option value="category_b">カテゴリB</option> <option value="category_c">カテゴリC</option> <option value="category_d">カテゴリD</option> </select> </form> 色々調べてみたのですが、ないものですね。私の勉強不足だとは思いますが、どなたかご助言の程よろしくお願い致します。

    • 締切済み
    • PHP