セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
- セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置する方法について詳しく教えてください。学習中ですが、詰まってしまいました。
- 現在のウインドウを書き換えることはできますが、セレクトボックスを設置しようとするとエラーが発生します。どのように修正すれば良いでしょうか？
- また、HTMLとJavaScriptのエンコーディングについても教えていただきたいです。書き換えた後のページが「Unicode」になるのはなぜでしょうか？
- ベストアンサー
セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか？「日本語[EUC]」に出来ないでしょうか？
- boobeegoo
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); この2行。’の中に’が入っている。 \’のようにエスケープするか、”を使いましょう。 後、document.writeの前後のopen/closeを行いましょう。 特にcloseが無い為、永遠に読み続けるのが鬱陶しいです。 文字コードに関しては、JavaScriptは内部処理でunicodeを使用している為。 documentのopen後に、「document.charset='EUC-JP';」のような指定をすることで解消できます。
関連するQ&A
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？
お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか？ 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST"> <select name="kazu"> <option value="<script language="javascript" src="UsualSet.js>" selected>1</option> <option value="<script language="javascript" src="EmergencySet.js>" >2</option> <option value="<script language="javascript" src="PauseSet.js>" >3</option> <option value="<script language="javascript" src="MorningSet.js>" >4</option> <option value="<script language="javascript" src="FulleSet.js>" >5</option> </select> <input type="hidden" name="kaijou" value="22890"> <input type="hidden" name="boxnumber" value="62"> <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- FireFoxだけエラーが出てしまう
フォームのセレクトに追加するために以下のコードを作りました。 ===外部ファイル[script.js]=== function addList(txt, val) { document.getElementById("sel").length = document.getElementById("sel").length + 1; document.getElementById("sel").options[document.getElementById("sel").length - 1].text = txt; document.getElementById("sel").options[document.getElementById("sel").length - 1].value = val; } ===HTMLファイル============== <FORM action="test.cgi" method="GET"> <SELECT name="sel"> <OPTION value="tokyo" selected>東京駅 </SELECT> <INPUT type=submit> </FORM> <SCRIPT TYPE="text/javascript" SRC="script.js"></SCRIPT> <SCRIPT type="text/javascript"><!-- addList("新宿駅", "shinjuku"); addList("渋谷駅", "shibuya"); addList("池袋駅", "ikebukuro"); // --></SCRIPT> しかし、IE6とOpera9.2では動くのですが、FireFox2.0ではエラーが出てしまいます。エラーは以下のようでプロパティがないと返されます。 document.getElementById("sel") has no properties これはどのように直せばよいのでしょうか？ お手数ですがご教授お願いいたします（環境はWindowsXPです）。
- ベストアンサー
- JavaScript
- 他のFormの入力内容により、Selectの状態を変化させたい
Formの状態を他のFormの入力によって変化させたいのですが。 イメージ的には <Script language="Javasript"> function data1() { document.forms[1].elements[0].value=document.test.i.value; } function data2() { document.forms[2].elements[0].options[document.test.i.value].selected=ture; } </script> 入力<br> <form name="test"> <input type="text" name="i" onKeyDown="javascript:if(event.keyCode==9){ data1();data2(); }" > </form><br><br> テキスト<br> <form> <input type="text"> </form><br><br> セレクト<br> <form> <select> <option>0 <option>1 <option>2 <option>3 </select> </form><br><br> こんな感じです。 これで、タブキーを押せば、「入力」Formに入力された内容が、関数data1()によって「テキスト」Formにも表示されます。 これと同じように、「入力」Formに入力された内容で、「セレクト」Formを変化させたいと思いますが、data2()エラーになり上手く動作しません。 「入力」Formに1を入力すれば、「セレクト」Formの1が選択された状態になる… と言った事をしたいのですが、どうすればいいでしょうか？
- ベストアンサー
- JavaScript
- 親フレームの変数にアクセス(JavaScript）
[index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューの値を読み出す方法
セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript"> <!-- function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; } function writePrice() { document.write(price);//通常価格表示 document.write(mprice);//会員価格表示 } //--> </script> </head> <body> <script type="text/javascript"> <!-- var price = '20000'; //通常価格 //--> </script> <script type="text/javascript"> <!-- var mprice = price * 0.9; //会員価格 writePrice(); //--> </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスの値取得に関して
こんにちは。今、セレクトボックスの値取得に頭を悩ませています。 具体的には、（送迎バスの）到着時間、出発時間を入力してもらい、 到着時間が出発時間より早くないとアラートを出すような仕掛けを 作りたく思っています。以下のようなスクリプトを作ったのですが、 時間の計算がうまくいかないみたいです。至らぬ点など多々あるかと 思いますが、ご教授よろしくお願いいたします。 <html> <head><title>select_test</title> <script type="text/javascript"> function jikoku_chk(){ //到着時刻 arrive_time=eval(document.getElementsByName("HH1").selectedindex)*60+eval(document.getElementsByName("MM1").selectedindex); //出発時刻 depart_time=eval(document.getElementsByName("HH2").selectedindex)*60+eval(document.getElementsByName("MM2").selectedindex); if (arrive_time > depart_time){ alert("出発時刻は到着時刻以降でなければなりません"); }else{ alert("入力内容は適切です"); } </script> </head> <body> <form name="s_box" action="./select_test.html" onsubmit="jikoku_chk()"> 到着時間 <select name="HH1"> <option>00 <option>01 <option>02 </select> : <select name="MM1"> <option>00 <option>01 <option>02 </select> <br><br> 出発時間 <select name="HH2"> <option>00 <option>01 <option>02 </select> : <select name="MM2"> <option>00 <option>01 <option>02 </select> <br> <input type="submit" value="登録"> </form> </body> </html>
- ベストアンサー
- JavaScript
- htmlのテキストボックスに書かれた文字によって
htmlのテキストボックスに書かれた文字によって表示する文字を変えたいのですが、コードがいまいちどうやって書いていいかわからないのでコードを教えて下さい。よろしくお願いします。 一応できなかったコード↓ <Form name="js"> <input type="text" name="txtb"> </Form> <script> <br> if(document.js.txtb.value="a"){document.write("a")} </script>
- ベストアンサー
- その他（インターネット・Webサービス）
- セレクトボックスについて
ログイン画面を作っていまして、セレクトボックスでCさんを選択し、パスワードを間違えて入力（valueの値がパスだと思って頂いて結構です）したらログイン失敗メッセージを出して、リンクからログイン画面に戻れるように下記のコードになっているのですが、 セレクトボックスの値がAさんにリセットされてしまいます。この時、Aさんではなくて最初にセットしたCさんにセットする方法はどのようにするのでしょうか？ #ログイン画面用サブルーチン print "Content-type: text/html\n\n"; print "<html>\n"; print "<head>\n"; print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n"; print "<title></title>\n"; print "</head>\n"; print "<body>\n"; &analysis; &auth; sub analysis{ if ($ENV{'REQUEST_METHOD'} eq 'POST') { read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); } else { $buffer = $ENV{'QUERY_STRING'}; } @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $value =~ s/\r//g; $FORM{$name} = $value; } $pass2 = $FORM{'password'}; return; sub login{ print <<HEADER; <center> <caption> <h1>ログイン</h1> </cption> <table border="5" bgcolor="cfcfcf" width="300" height="150"> <tr> <td align="center" valign="center"> <form name="form" method="post" action="./rental.cgi"> ユーザー名: <select name="user_name"> <option value="1" $check1>A</option> <option value="2" $check2>B</option> <option value="3" $check3>C</option> </select> <br> <br> パスワード: <input type="password" name="password"> <br> <center> <input type="submit" name="submit" value="ログイン"> </center> </form> </td> </tr> </table> </center> HEADER } #ユーザー認証サブルーチン sub auth{ use DBI; $db_name = "bookmanagement"; $db_host = "localhost"; $db_user = ""; $db_password = ""; $db_table = "usertable"; $ID = $pass1; $password = $pass2; $conn = DBI->connect("DBI:Pg:dbname=$db_name;host=$db_host",$db_user,$db_password)||die "DBI connect failed: &DBI::errstr"; $sql = "select userID,pass from usertable where pass='$password'"; $result = $conn->prepare($sql); $ref = $result->execute; print <<HEADER; <script type="text/javascript"> function henkyaku(id){ document.form.user_name.value=id; document.form.submit(); } // --> </script> HEADER ($db_userID,$db_password) = $result -> fetchrow_array(); $result -> finish; if($pass2 eq ''){ &login; } elsif(($db_password eq $password) and ($db_userID eq $ID)){ &display; } else{ print "<center>"; print "ログインに失敗しました。<br>ユーザー名・パスワードを確認してもう一度ログインしてください。<br><br>"; print "<a href=\"./rental.cgi\" onClick=\"henkyaku('$pass1')\">" ."ログインページへ戻る"."</a>"; print "</center>"; } $conn -> disconnect; } print <<FOOTER; </body> </html> FOOTER 1;
- ベストアンサー
- CGI
- セレクトメニューで
セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript
お礼
ありがとうございました。 一発解決です。 open/closeに関する指摘もありがたかったです。
補足
ありがとうございます。 >\’のようにエスケープするか、”を使いましょう。 ああっ！こんなことわかってたはずなのに・・・ 文字コードの方も試してみましたがバッチリです。 書き換えた方のセレクトボックスがうまく動作しませんが、もう少し考えてみます。