ロード時に外部ファイル読込(2)

このQ&Aのポイント
  • 画面ロード時に、ラジオボタンのValueによってテキストボックスの背景色等を変える処理です。
  • 本ソースにいざ反映させてみると、正常に動作しませんでした;注意ポップアップは出ないのですが、指定したとおりに背景色等が変わらない状態です。
  • お手数ですが、よろしくお願いいたします。
回答を見る
  • ベストアンサー

ロード時に外部ファイル読込(2)

先ほど質問させていただいた者です。再度お借りいたします。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2100998 画面ロード時に、ラジオボタンのValueによって テキストボックスの背景色等を変える処理です。 本ソースにいざ反映させてみると、正常に動作しませんでした; 注意ポップアップは出ないのですが、指定したとおりに背景色等が変わらない状態です。 下記ソースで修正点ございましたらご教授ください。 【HTML】 <HTML> <HEAD> <script type="text/javascript" src="java.js"></script> </HEAD> <BODY onload="Check(document.myFORM)"> <FORM name="myFORM">   <input type="radio" name="class" value="1" checked>その1   <input type="radio" name="class" value="2">その2   <input name="ATEXT" type="text"> </FORM> </BODY> </HTML> 【java.js】 function Check(oj){   switch (oj.class.value) {     case 1:      oj.ATEXT.disabled = true;      oj.ATEXT.style.backgroundColor = "#999999";      braek;     case 2:      oj.ATEXT.disabled = false;      oj.ATEXT.style.backgroundColor = "#FFFFFF";      braek;     default:      braek;   } } お手数ですが、よろしくお願いいたします。

noname#99462
noname#99462

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

#1補>var select = oj.rb1[0].checked ? oj.rb1[0].value : oj.rb1[1].value : oj.rb1[2].value : oj.rb1[3].value;という記述でよろしいのでしょうか? だめです。 たくさん有る場合には、 var select=""; var len=oj.rb1.length; for(var i=0;i<len;i++){ if(oj.rb1[i].checked){ select = oj.rb1[i].value; break; } } に置き換えて下さい。 >onClick="clickA(document.myFORM)"としてすでに別で使用しているのですが、一緒に書いても問題ないのでしょうか? 1つのエレメントに2つの onClick 属性は書けないと思います。 既に、設定されているなら、私の書いたモノは必要ないと思います。 switch 文で複数のスタイルの設定があっても、onload 時には、 checked がされているラジオボタンがチェックがついているのに決まっているから、おそらく必要なのだろうと思って書いたまでです。 老婆心ですが、 clickA()があってそれでラジオボタンの状態によってスタイルを変更しているのであれば、onload 時に別のCheck( ) は、必要ないように思います。switch でどのラジオボタンが選ばれているか(onload時には)調べる必要はないし、また、単にデフォルトでスタイルの設定をしておけば良いと思います。

noname#99462
質問者

お礼

お礼が遅くなり申し訳ありません。 頂いた例文ソースで無事動作しました!ありがとうございました。 本ソースを抜粋しすぎて、意味のわかりにくい質問をしてしまい申し訳ありませんでした。 会員情報を新規登録するページで、ラジオボタンを選択し、 それによってテキストボックスの色を変えるページをPHPで作っています。 登録確認ボタン後登録確認画面に遷移し、キャンセルを押下して 新規登録入力画面に戻ると色の情報が保持できていない、という状態だったため、 このような質問をさせていただきました^^; (Checkedは質問文では固定で書いてしまいましたが、PHPでは可変にプログラムしています;) お手間をおかけいたしまして申し訳ありませんでした。 ありがとうございました。

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

>oj.class.value 同じ名前を付けたエレメントにアクセスするには配列としてアクセスする必要があります。 oj.aName[0].value >oj.class.value class は、予約語です。(古いバージョンのjavascript では、予約語にはなっていませんが、避けるべきです) プロパティなどの識別名としては使用できません。 >braek break の誤りです。 >case 1: >case 2: テキストボックスのvalue は、テキストです。 case "1": case "2": のようにしてやるか、数値に変換する必要があります。 修正したもの function Check(oj){ var select = oj.rb1[0].checked ? oj.rb1[0].value : oj.rb1[1].value; switch (select) { case "1": oj.ATEXT.disabled = true; oj.ATEXT.style.backgroundColor = "#999999"; break; case "2": oj.ATEXT.disabled = false; oj.ATEXT.style.backgroundColor = "#FFFFFF"; break; default: break; } }   <input type="radio" name="rb1" value="1" checked onclick="Check(this.form)">その1   <input type="radio" name="rb1" value="2" onclick="Check(this.form)">その2

noname#99462
質問者

お礼

早速のご回答ありがとうございます。 class,breakについては質問文のミスです、本ソースではどちらも正常でした。 ご指摘ありがとうございます。 申し訳ありませんが、 var select = oj.rb1[0].checked ? oj.rb1[0].value : oj.rb1[1].value; の使い方についてご教授ください。 本ソースではラジオボタンは4つ使用しているのですが、 var select = oj.rb1[0].checked ? oj.rb1[0].value : oj.rb1[1].value : oj.rb1[2].value : oj.rb1[3].value; という記述でよろしいのでしょうか? また、HTMLファイルのほうでは、onclickイベントは onClick="clickA(document.myFORM)"としてすでに別で 使用しているのですが、一緒に書いても問題ないのでしょうか? ご多忙の折恐縮ですが、ご教授願います。

関連するQ&A

  • ロード時に外部ファイル読込

    お世話になっております。 onload時に外部ファイルのJavaScriptを呼び出したいのですがうまく動作しないので、 ここをお借りしてご質問させていただきます。 長いソースを抜粋しています。 【HTML】 <HTML> <HEAD> <script type="text/javascript" src="java.js"></script> </HEAD> <BODY onload="Check(Document.myFORM)"> <FORM name="myFORM">   <input name="ATEXT" type="text"> </FORM> </BODY> </HTML> 【java.js】 function Check(oj){  oj.ATEXT.disabled = true;  oj.ATEXT.style.backgroundColor = "#999999"; } 実際はテキストボックスがたくさんあり、HTML内に書くと ごちゃごちゃしてしまうため外部ファイルに記述しています。 しかし、動作させてみると「Documentは宣言されていません」というエラーが発生してしまいます; どうかご教授お願いいたします。

  • Firefoxのdisabledプロパティのバグ?

    複数のラジオボックスがあり、すべてのラジオボタンで 「YES」がチェックされた時にだけ、submitボタンが 有効になるようJavaScriptで制御できればと思ってます。 素人ながら以下のようなJavascriptにしたところ、 IEやSafari、Chromeでは意図した通り動作しましたが、 ただFirefoxのみボタンがdisabledになったまま有効になりませんでした。 解決策がわかる方がいらっしゃればご教授お願いできればと思います。 よろしくお願い致します。 <script type="text/javascript"> <!-- function check() { if (form1.radio1[0].checked && form1.radio2[0].checked && form1.radio3[0].checked) { form1.send.disabled = false; } else { form1.send.disabled = true; } } ; //--> </script> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form>

  • ラジオボタンで入力項目の可・不可を切り替える方法

    雑誌やネットを調べ、ラジオボタンで入力項目の可・不可を切り替える JavaScriptを見つけたのですが、思うように動作しません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Sample</title> <script type="text/javascript"> <!-- function radioChange() { if(document.form1.radioSelect[0].checked == true) { document.form1.04text.disabled = false; document.form1.04text.style.backgroundColor='#FFFFFF'; document.form1.05text.disabled = false; document.form1.05text.style.backgroundColor='#FFFFFF'; document.form1.06text.disabled = false; document.form1.06text.style.backgroundColor='#FFFFFF'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } else if(document.form1.radioSelect[1].checked == true) { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = false; document.form1.07text.style.backgroundColor='#FFFFFF'; document.form1.08text.disabled = false; document.form1.08text.style.backgroundColor='#FFFFFF'; document.form1.09text.disabled = false; document.form1.09text.style.backgroundColor='#FFFFFF'; } else { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } } //--> </script> </head> <body onload="radioChange()"> <form action="" method="post" name="form1"> <table> <tr> <td> <input name="radioSelect" type="radio" onclick="radioChange()" value="1" /> 国内旅行 <input name="radioSelect" type="radio" onclick="radioChange()" value="0" /> 海外旅行</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td> 国内編:<br /> 希望地 <input type="text" name="04text" /> <br /> 希望日: <input type="text" name="05text" /> <br /> 乗り物: <input type="text" name="06text" /> </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>海外編:<br /> 希望地 <input type="text" name="07text" /> <br /> 希望日: <input type="text" name="08text" /> <br /> 乗り物: <input type="text" name="09text" /> </td> </tr> </table> </form> </body> </html> テキストボックスの「name」を、英字から始めれば解決するのですが 事情があり、nameを数字で始める必要があります。 この解決方法を教えていただけませんでしょうか。 よろしくお願いいたします。

  • チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

    下記の動作をする checkfunc(); の書き方をご教示ください. <html> <head> <script type="text/javascript"> checkfunc() </script> </head> <body> <form name="myform"> <input type="checkbox" name="yesno" value="1">チェックボックス <input type="radio" name="rdo1" value="0">ラジオボタン0 <input type="radio" name="rdo1" value="1">ラジオボタン1 <input type="radio" name="rdo1" value="2">ラジオボタン2 <input type="radio" name="rdo1" value="3">ラジオボタン3 <input type="radio" name="rdo1" value="4">ラジオボタン4 </form> </body> </html> (1) このHTMLのラジオボタン5つは,最初は全てdisabledです. (2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです. (3) 逆に,チェックが外れたらラジオボタンはdisabledに戻ります. (4) このjavascriptは,PHPファイルに組み込みますが.表示時にDBを読み込んでどれに  チェック/選択されていたかによって,checkboxやradioに「checked」を追記します.  その場合,enabled/disablesの関係に矛盾がないようにもしたいですが,  <body>に onload="checkfunc();" と入れればいいでしょうか? なお,IE以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信(submit)」ボタンを enable で表示させたいです。 1:● 2:○ 1:● 2:○ それ以外の選択肢では「送信(submit)」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • 外部ファイルを読み込めない

    初めまして。いつも質問やその回答を読ませていただいて、参考にさせていただいてます。 javascriptで作った超簡単なプログラムが動かないんです。 どなたか、助けてください。(>_<) 以下、test.htmlとtest.jsを作って、試して見ているのですが、動かない理由が分からず苦しんでいます。 =============test.html============= <html> <head> <script type="text/javascript" language="javascript" src="./test.js" ></script> </head> <body> <table> <form name="form2" method="post" onSubmit="return check()"> <tr><td><input type="text" name="names" size="50"></td></tr> <tr><td><input type="submit" name="submit" value="予約"></td></tr> </form> </table> </body> </html> =============test.html============= =============test.js============= function check(){ names=document.form2.names; if(names.value == ""){ alert("お名前を入力してください。"); names.focus(); return false; } else return true; } =============test.js============= どちらも、同じディレクトリに入れています。safari、ieでも×です。 どなたか、教えていただけませんでしょうか。

  • ラジオボタンについて

    つまらない質問ですがどうか教えてください。 <form name="myform"> ・ ・ ・ <INPUT TYPE="RADIO" NAME="R1" VALUE="1">関連あり</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="2">関連なし</INPUT> <INPUT TYPE="RADIO" NAME="R1" VALUE="3">不明</INPUT> </form> 上記のようなラジオボタンを作ったのですが、 このラジオボタンのチェックされた値を取得するには document.myForm.cGyoumu.value ではできないのでしょうか? LOOPさせながらdocument.myForm.elements(i).checked で探さないと取得できないのでしょうか? 同じフォーム内にラジオボタンが複数あるため、 この方法はあまりやりたくありません。 ほかに方法がありましたら、どうか教えてください。

  • 再度読み込みは出来ないのでしょうか?

    各テキストボックスに値を入れて、 C11 = a11 * b11 + a12 * b21 + a13 * b31、 c12 = a11 * b12 + a12 * b22 + a13 * b32、 : : c21 = a21 * b11 + a22 * b21 + a23 * b31 c22 = a21 * b12 + a22 * b22 + a23 * b32・・・ としたいのですが、うまくロジックが思いつきません。 単純に式をずらずら書いたのですが、c12以降の欄がすべてゼロになってしまいます。 いい方法を教えてください。お願いします。 <head> <script> function kei(){ var form_a=document.getElementById('A'); var form_b=document.getElementById('B'); var form_c=document.getElementById('C'); var keic11 = 0; var keic12 = 0; : : keic11=parseInt(form_a.a11.value) * parseInt(form_b.b11.value) * parseInt(form_a.a12.value) * parseInt(form_b.b21.value) + parseInt(form_a.a13.value) * parseInt(form_b.b31.value); form_c.c11.value = keic11; keic12=parseInt(form_a.a11.value) * parseInt(form_b.b12.value) + parseInt(form_a.a12.value) * parseInt(form_b.b22.value) + parseInt(form_a.a13.value) * parseInt(form_b.b32.value); form_c.c12.value = keic12;     :     : } </script> </head> <body> <table border = 1> <form id = "A"> <tr> <td> <input type = "text" size = 5 name = "a11"></input> </td> <td> <input type = "text" size = 5 name = "a12"></input> </td> <td> <input type = "text" size = 5 name = "a13"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a21"></input> </td> <td> <input type = "text" size = 5 name = "a22"></input> </td> <td> <input type = "text" size = 5 name = "a23"></input> </td> </tr> </form> </table> <table boeder = 1> <tr> <input type = "button" onClick="kei()" value = "×"></input> </tr> </table> <table border = 1> <form id = "B"> <tr> <td> <input type = "text" size = 5 name = "b11"></input> </td> <td> <input type = "text" size = 5 name = "b12"></input> </td> <td> <input type = "text" size = 5 name = "b13"></input> </td> <td> <input type = "text" size = 5 name = "b14"></input> </td> <td> <input type = "text" size = 5 name = "b15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b21"></input> </td> <td> <input type = "text" size = 5 name = "b22"></input> </td> <td> <input type = "text" size = 5 name = "b23"></input> </td> <td> <input type = "text" size = 5 name = "b24"></input> </td> <td> <input type = "text" size = 5 name = "b25"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b31"></input> </td> <td> <input type = "text" size = 5 name = "b32"></input> </td> <td> <input type = "text" size = 5 name = "b33"></input> </td> <td> <input type = "text" size = 5 name = "b34"></input> </td> <td> <input type = "text" size = 5 name = "b35"></input> </td> </tr> </form> </table> 答え <table border = 1> <form id = "C"> <tr> <td> <input type = "text" size = 5 name = "c11"></input> </td> <td> <input type = "text" size = 5 name = "c12"></input> </td> <td> <input type = "text" size = 5 name = "c13"></input> </td> <td> <input type = "text" size = 5 name = "c14"></input> </td> <td> <input type = "text" size = 5 name = "c15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c21"></input> </td> <td> <input type = "text" size = 5 name = "c22"></input> </td> <td> <input type = "text" size = 5 name = "c23"></input> </td> <td> <input type = "text" size = 5 name = "c24"></input> </td> <td> <input type = "text" size = 5 name = "c25"></input> </td> </tr> </form> </table> </body>

  • ボタンの2度押しを防止するには?

    Webページでボタンの2度押しを防止するにはどうしたらいいでしょうか? onClickでボタンをdisableにするようにしたところ、Submitしません。Disableにした上でSubmitさせるとパラメータが渡せません。 <HTML><BODY> <FORM method="get" name="MyForm" action="page2.html"> <INPUT type="submit" name="submit1" value="submit1" onClick="this.disabled = true;document.MyForm.submit();"> <INPUT type="submit" name="submit2" value="submit2" onClick="this.disabled = true;document.MyForm.submit();"> </FORM></BODY></HTML> 1つのFORM内に複数のボタンがあるため、どのボタンが押されたかがパラメータで渡される必要があります。

  • リセットさせるにはどうしたらいいでしょうか?

    下記のような配列のフォームでボタンを押したらテキストフォールドの値を空にしたいのですがどのように記述したらいいのでしょうか? ご教授宜しくお願いします。 <form name="myform">  <input type="text" name="no[100]" value="abc">  <input type="text" name="no[102]" value="der">  <input type="text" name="no[105]" value="ghi">            .            .           動的に増える </form> ※ document.myform.elements["no[100]"].value = ""; みたいに書けば個別には空にすることは出来たのですが。 elementsの順番で空にすることがどうしてもうまくいきません。 document.myform.elements[0][0].value = "";みたいに。 document.myForm.elements['no[]'].lengthで個数を取得して順番に空にするってことがしたいのですが、<input type="text" name="no[]" value="abc">だったらうまくいくのかもしれないですけど、no[値]があるとどうもうまくいきません。 宜しくお願いします。