- ベストアンサー
読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？
お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.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> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。
- chack
- お礼率99% (286/287)
- JavaScript
- 回答数8
- ありがとう数11
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
#4です。 ・・そうすると、Ajaxで読み込むことになりそうですね。ただし、タイミングとしては、セレクトされる毎というよりは、submit時に対応するjsだけを読み込めばすみそうですね。 他の方法として、読み込むｊｓがご質問の内容のようにForm内の（hidden）タグを書き出すものだけだと限定できるならば、最初に全部を読み込んでおいて、テーブルを作ってしまうというのもありそうですね。 以下のような感じでも取得可能と思いますが、参考までに・・・ *ｊｓファイルは適宜指定してください。対象はinputタグだけにしています *取得したタグを消去してしまうなら、コメントアウトの部分で可能 *外側のdisplay:noneの<div>はいらないけど念のため <html> <head> <script> window.onload=function() { var m=''; for (var i=1; i<6; i++) { if (document.getElementById('JS'+i)) { var e=document.getElementById('JS'+i) var el=e.getElementsByTagName('INPUT'); m+='JS=' + i + '\n'; for (var j=0; j<el.length; j++){ m+=' name:' + el[j].name + ' value:' + el[j].value + '\n'; } // while (el[0]){e.removeChild(el[0]);} } } alert(m); } </script> </head> <body> <div style="display:none;"> <div id="JS1"> <script type="text/javascript" src="JS1.js"></script> </div> <div id="JS2"> <script type="text/javascript" src="JS2.js"></script> </div> </div> </body> </html>
その他の回答 (7)
- yyr446
- ベストアンサー率65% (870/1330)
#2です。補足します ＃7のソースがIEで動かないのは、IEでは<SCRIPT>タグは ReadOnly属性で、中身をDOMで書き換えられないみたいです。 FireFox、Operaは出来ます。 ↓のサイトで、確認できます。 http://www.drk7.jp/MT/archives/001314.html
お礼
サンプルを組んで下さった上に色々検証して頂き、どうもありがとうございます。 「初歩のJavascript」とでも題されたサイトにでも見つかる程度のスクリプトだろうと思ってしまっていましたが、そこが素人の甘さで、大変なご面倒をおかけしてしまいました。 申し訳ありません。 とりあえずは目的のフォーム作製だけを考えなければなりませんが、うまく行ったら、改めて「何でこれでうまく行ったんだろう？」と色々参考にさせて頂きます。 どうもありがとうございました！
- yyr446
- ベストアンサー率65% (870/1330)
#2のものです。 回答した手前、サンプルを作ってみました。 JKLのライブラリークラス「jkl-parsexml.js」を使って、フォームで選んだ 外部(URL指定も可能)のJAVASCRIPTソースを取り込んでいます。 取ってきたソースを使って、DOMで送信フォームを作っています。 ※その他の詳しい仕様がわからないので、あなたの質問に記載された のみの仕様です。 ＜結果＞ MAC持ってないので、WinXP FireFOX3.0で試したらOKでした。 しかし、IE6.0だとDOMの操作仕様が違うみたいで動きませんでした。 あなたの環境で動けば幸いです？ 中途半端ですみません。 ＝＝＝本体ソース＝＝＝ <script type="text/javascript" charset="utf-8"> <!-- function formselect(){ var src= document.getElementById("kazu").value; alert (src); var textObj = new JKL.ParseXML.Text(src); var textDATA = textObj.parse(); var headLoc = document.getElementsByTagName("head").item(0); var scriptObj = document.createElement("script"); scriptObj.setAttribute("id", "selectfunc"); scriptObj.setAttribute("type", "text/javascript"); scriptObj.setAttribute("charset", "utf-8"); var srctext ="<!-- \n"; srctext += "function formgen(){"; srctext += "document.open();\n"; srctext += "document.write(\"<FORM ACTION='pro.cgi' METHOD='POST'>\");\n"; srctext += textDATA + "\n"; srctext += "document.write(\"<br><input type='submit' name='Submit' value='送信'>\");\n" srctext += "document.write(\"</FORM>\");\n"; srctext += "document.close();\n"; srctext += "}\n"; srctext += "// --> \n"; scriptObj.appendChild(document.createTextNode(srctext)); headLoc.appendChild(scriptObj); formLoc = document.getElementById("btn1"); var btnObj = document.createElement("input"); btnObj.setAttribute("type", "button"); btnObj.setAttribute("id", "btn2"); btnObj.setAttribute("size", "10"); btnObj.setAttribute("value", "フォーム生成"); btnObj.setAttribute("onclick", "formgen(); return false;"); formLoc.parentNode.appendChild(btnObj); } function reset(){ if ((typeof document.getElementById("selectfunc")) =="object"){ var delloc = document.getElementById("selectfunc").parentNode delloc.removeChild(delloc.lastChild); } if ((typeof document.getElementById("btn2")) =="object"){ var delloc = document.getElementById("btn2").parentNode delloc.removeChild(delloc.lastChild); } } // --> </script></head> <body> <form id="formselect" action="#"> <select id="kazu"> <option value="UsualSet.js">1</option> <option value="EmergencySet.js">2</option> <option value="PauseSet.js">3</option> </select> <input id="btn1" type="button" size="10" value="フォーム選択" onclick="formselect(); return false;" > </form> <br> <input id="btn3" type="button" size="10" value="リセット" onclick="reset(); return false;" > </body> ＝＝外部に準備したUsualSet.jsの中身＝＝ document.write("<input name=\"youbi\" type=\"text\" value=\"土曜\"><input name=\"codenumber\" type=\"text\" value=\"732\"><input name=\"busho\" type=\"text\" value=\"経理\">"); =========＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝外部に準備したEmergencySet.jsの中身＝＝ document.write("<input name=\"youbi\" type=\"text\" value=\"EM\"><input name=\"codenumber\" type=\"text\" value=\"999\"><input name=\"busho\" type=\"text\" value=\"Emerg\">"); =========＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝外部に準備したPauseSet.jsの中身＝＝ document.write("<input name=\"youbi\" type=\"text\" value=\"pause\"><input name=\"codenumber\" type=\"text\" value=\"111\"><input name=\"busho\" type=\"text\" value=\"pause\">"); =========＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
お礼
その節はどうもありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
#4、#5です。 書き忘れてしまいました・・・ ＞既存のCGIが毎日何度も自動的に書き換えているので、～～ どの方法でも、jsファイル取得からCGIへformを送るまでに、なんらかのタイムギャップがありますが、その間にjsファイルを書き換えられている可能性があります。 その場合でも（古い内容のデータを送っても）CGI側では処理してくれるようになっているのですよね？ タイムギャップの率を一番少なくできるという意味からは、送信直前にAjaxで取得するのが一番良いかも。
お礼
何度もお世話頂き、恐縮です。 用途は例えば株取引のようなシビアな即応性が必要なものでは無いので大丈夫です。 今回の目的を果たすには、私の知識が及ばないだけで探せばどこかに該当するサンプルを公開して下さっているサイトくらい見つかるものと思っていたんですが、そう甘いものではなかったんですね。 昨日Ajaxのページの解説をいくつか見ては見たものの、今のところ、それが普通のJavascriptとかなり異なる物なのかとか拡張版のようなものなのかとかもまだよく解っていませんが、今までの方法では不可能だったものを可能にするもののようですね。 私は本来はこういった分野はズブの素人なのになぜかソースの組み込みが必要な場面にばかり出逢うようになってしまっていますが、実は以前にも「それはAjaxなら可能ですよ」とこのサイトでご回答を頂いたことがあり、何とか近い内に理解したいと思います。 この度はどうもお世話になりました。 アラートが出るところまで教えて頂ければさすがにあとは何とかなります。 どうもありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問の通りだと、既回答のようになるのでしょうが・・・ ＞セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更～～ ・・ってもしかして、セレクトで1～5を選んだ時に、5×3のテーブルから値を選んで入れたいってことでしょうか？ だとすると、単純にスクリプトだけで処理してもたいしたことはないですよね？（テーブルがとても大きくて複雑だというなら別ですが・・） スクリプトだと表の中身が解析される可能性がありますが、それはご質問の方法でも、JSONPでも似たりよったりとも言えるでしょう。 一方、最終的な内容がセレクトボックスの値だけで決るのであれば、わざわざ書換える必要もないように思えます。 そのまま送って、CGI側でテーブルを参照してやれば処理は簡単ですし、テーブル自体を解析される可能性もほとんど排除できます。 勘違いしてたら、失礼。
お礼
アドバイスありがとうございます。 > セレクトで1～5を選んだ時に、5×3のテーブルから値を選んで入れたいってことでしょうか？ 単純に申し上げればそうです。 ただ、UsualSet.js、EmergencySet.js、PauseSet.jsなどの外部ファイルは別の既存のCGI（私たちはこのCGIの内容を書き換える権利がありません）が毎日何度も自動的に書き換えているので、その時々でテーブル内容が変わり、外部ファイルを読み込むのは必須です。 また、その外部ファイルを読み込もうとしているフォームからデータを送信する先のCGIも既存のもので、私たちが書き換えたり設計変更を依頼する権利の無いものなので、フォームのHTML書類内で何とかする必要があり、頭を痛めております。(;_;)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
ご希望の物はJSONP+DOMで作れますし、 JSONPならclassic MacでもDOMに対応しているブラウザで動作すると思います。 たしかNetscape4.8がDOMに対応していたと思います。 iCabはAjaxにも対応しています。 > しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 ではまず、セレクトフィールドを変更すると、テキストフィールドに選択した文字が表示されるスクリプトは書けますか？ AjaxでもJSONPでも、セレクトフィールドに連動させる方法もわからなければ作ることはできません。 これもできなければ、AjaxやJSONPよりも前に、DOMやdocument object（document.forms[0]や、document.allという書き方）から勉強してください。
お礼
ご回答ありがとうございます。 > セレクトフィールドに連動させる方法もわからなければ作ることはできません。 はい。ですから、その方法がサンプルスクリプトとしてどこかにないかと探しているところです。 時間的に厳しいので、何を勉強すれば良いのかではなく、どんなソースを流用すればいいのかをお伺いしておりまして…。
- yyr446
- ベストアンサー率65% (870/1330)
この程度なら、ajaxはそんなに難しくないですよ。案ずるより生むが易しです。 公開されているajaxのライブラリーを使えば、ブラウザーやOSの違いも吸収 してくれるし、コーディングも簡単です。 prototype.jsとかYUI以外にも http://www.kawa.net/works/js/jkl/parsexml.html なんか使いやすいですよ（MACもOKだったはず） ↓も参考になります。 http://allabout.co.jp/internet/javascript/subject/msub_kajax.htm あなたのやりたい事のためにはSCRIPT TAGアクセス(JSONP)の技法が使えそうですね。（参考URL）
お礼
参考URLをどうもありがとうございます。 うーん、やっぱり、単純に変数名を入れ替えるレベルで使えるサンプルソースって無いんですね。 例えば、「セレクトボックスで番号を選ぶと表示されている画像が替わります」みたいなサンプルソースがあれば、その中の「<img src="aaa.jpg">」といったように画像が関連する部分を見つけてそこを「<script language="javascript" src="MorningSet.js>」に入れ替えればいいだろうといった感じに対応出来るのですが、そのレベルを超えてしまうと今回は物理的に時間が足りなくて…。 そこで、「セレクトボックスで読込みファイルを選択」とかググってみたりしていたのですが、ビンゴなサンプルスクリプトを公開しているサイトが見つからなくて、そういうサンプルがあるサイトをご存知の方がいらっしゃらないかと質問させて頂いたんです。
- yambejp
- ベストアンサー率51% (3827/7415)
ajaxを使って、外部htmlを読み込んでみてはいかがですか？
お礼
早々のご回答、ありがとうございます。 あ、ajaxって、確か、対応OSとかブラウザが結構限られてませんでしたっけ？ MacOS9とかでも作動しなければならないんで、あれは確かダメだったような… それから、こう書いていながら私は他にはajaxの知識って皆無でして、今から勉強して数日で目的を達するにはほぼ絶望的かと。(^^;
お礼
その節はどうもありがとうございました。