CGI(Perl)で、Javascriptを用いWEBアプリケーションを作成しています。
やりたいことは、親子関係(2階層)の2つのプルダウンの作成です。
親のプルダウンを選択すると、
子のプルダウンのリストの内容が、絞り込まれるようにしたいのです。
コマンドボタン(<INPUT type="button"・・・)でsubmit()を使うとうまくいったのですが、
画面全体がリフレッシュされるため、他の入力中の項目がクリアされてしまいます。
javascriptを使って解決したいのですが、行き詰っています。
どうかお知恵をお貸しください。宜しくお願いします。
なお、2つ(親子)のプルダウンのアイテムリストは、
mdbファイル(db1.mdb)で2つのテーブルで用意して、
SQL(select文)で呼び出すようにしてます。
2つのテーブルは、以下のような感じです。
talbe1(親用)
==========================
kuni
------------------------
日本
米国
中国
:
==========================
talbe2(子用)
==========================
kunitoshi
------------------------
日本東京
日本横浜
日本名古屋
日本大阪
米国ワシントン
米国ニューヨーク
米国ロスアンゼルス
中国北京
中国上海
: :
==========================
なお、submitを使ってうまくいった時のソース(aaa.cgi)は、
以下のような感じです。
<aaa.cgi>
↓=====================================================
:
$oya=$input_data{'oya'};
<FORM name="form1" method="POST" action="aaa.cgi">
<SELECT name="oya">
EOM
$rs = $db->Execute("SELECT table1.kuni FROM table1");
while (!$rs->EOF) {
print "<OPTION>",$rs->Fields('kuni')->Value,"\n";
$rs->MoveNext;
}
print <<EOM;
</SELECT>
<INPUT type="button" value="→" name="sub1" onclick="submit();">
<SELECT name="ko">
EOM
$rs = $db->Execute("SELECT table2.toshi FROM table2 WHERE (((table2.kuni)=$oya))");
while (!$rs->EOF) {
print "<OPTION>",$rs->Fields('toshi')->Value,"\n";
$rs->MoveNext;
}
print <<EOM;
</SELECT>
:
↑=====================================================
よろしくお願いします。
No.5
- 回答日時:
IE依存ですが、ご参考までに。
JavaScript初心者入門講座: Step3・データベースに接続
http://java-script.seesaa.net/category/3196594-1 …
Microsoft JScript での ADO コードの例
http://msdn.microsoft.com/ja-jp/library/cc408217 …
しかし、リモートのDBにJavaScriptで接続しにいける仕様は普通考えられません。
誰でも任意のSQLクエリを発行できるってことは大変なリスクを伴います。
ですので、内部的にSQLクエリを発行するとしても、何らかのサーバサイド技術を介してJavaScriptで扱いやすいフォーマット(JSON, XML等)に変換してもらってから取得するのがいいと思います。
ご回答ありがとうございます。
>DBにJavaScriptで接続しにいける仕様は普通考えられません
DBへの接続は、Perlで行っているのですが、そういう意味ではないのでしょうか。
また、私の誤解でしょうか。
いずれにしても、SQLのセキュリティについては考えてませんでした。
私の知識不足というのもあるのですが、
今回の環境は、部署内の閉じたLANでのシステムなので、
セキュリティを甘く考えていたこともあります。
しかしながら、SQLが誰でも発行できるとは、知りませんでした。もっと勉強します。
No.4ベストアンサー
- 回答日時:
サブミットで更新の話は聞いてなかった物で、...
サブミットは使えませんね。(別のフォームにしない限りは)
となると、やはりサブミットとは別途のAJAXリクエストしか
ないような気がします。
No.3
- 回答日時:
「できれば、「ajax」以外で解決したいのですが。
」となると、JSONPアクセスとか、ダミーのIFRAME要素を使った
変形JSONPアクセスとかがありますが、かえって面倒なような...
(ちなみにXHR=XMLHttpRequest=AJAXの事です。)
変形JSONPアクセスとは、
<iframe name="dumy" id="dumy" width="0" height="0">
をこっそり、作っておきます。
formのtarget属性でtarget="dumy"を指定してサブミットした
結果がdumyに表示(実際は見えない)されるようにします。
dumyのonloadのイベントで、dumyのdocumentを辿って目的の要素を
取得して、セレクトボックスを置き換えるとか、HTML5のpostMessage()で送る。
あるいは同じ手口で、cgiがHTMLを書き出すのでなくjavascript(MIME:text/javascript)
を書き出し、iframe内から予め作っておいたcallback用の関数を
parent.callback({});
で{}でデータを渡して呼び出す(もろにJSONP)とか。
この回答への補足
再びのご回答、重ねて御礼申し上げます。
「変形JSONPアクセス」というのも、初めて知りました。
「formのtarget属性でtarget="dumy"を指定してサブミット」ということは、
submit()を使って、「<form>・・・</form>」内の全ての値を、
一旦、ダミーフレームに渡すということなのでしょうか。
誠に申し訳ございませんが、また説明がもれていましたが、
このフォームには「登録」というコマンドボタンもあって、
それが押されるとサブミットして、<form>内のデータがデータベース(mdb)に更新されるようにしているのですが、
このときのサブミットとの使い分けはどうするのでしょうか。(私の勘違いでしょうか。)
本当に、初歩的な質問ばかりで申し訳ございません。
もっと簡単に、<SELECT name="oya">で選択した値が変数$oyaに代入でき、
この変数$oyaを元に、SQL文のWHEREで、<SELECT name="ko">のリストの絞込みができるのかのと思っていました。
いずれにしても、もう少し、私自身が勉強してから質問した方が良い見たいですね。
本当にありがとうございました。
No.2
- 回答日時:
セレクトメニューならonchangeで選択時に実行されます。
<select onchange="hoge()">
>submit()を使うとうまくいったのですが、画面全体がリフレッシュ
submit()は普通にsubmitボタンを押してフォームを送信するのと変わらないので、リフレッシュしてしまうのは仕方ないです。
ページを遷移させずに裏でこっそりサーバーと通信するにはXHRというのを使います。
http://allabout.co.jp/internet/javascript/closeu …
URLのサンプルにあるrequestFileという関数に渡している引数を見ると
requestFile( '' , 'GET', './test.txt' , true )
→ requestFile( 送信するデータ , method , action , 同期か非同期か )
CGIとの通信する時の情報が普通にフォーム送信するのとだいたい同じなのがわかると思います。
なのでactionで指定されたCGIの処理は普通のフォームとやり取りするのと同じです。
サンプルは送信データ部分が空になってますが、日本語を含む場合はURLエンコードが必要です。
データを受け取る側のCGIは返す値をprintとかechoで出力するだけです。
色々書きましたが今XHR使う時は、サンプルのようなソースをイチから書くより
ライブラリを使う人が多いんじゃないかと思います。
参考URL:http://jsgt.org/ajax/ref/test/json/getpost/test3 …
この回答への補足
ご回答、誠にありがとうございます。
申し訳ございません、ajaxについては、全く知りませんでした。
tenderfeel様のご指示のとおり、参考サイトなどを調べてみたのですが、
まだよく理解できていません。
例えば、
<select name="oya" onchange="hoge()">
として、
function hoge(){
}
の中身に、
http://allabout.co.jp/internet/javascript/closeu …
のサンプルのコードを書けばよいのでしょうか。
その場合、
requestFile( 送信するデータ , method , action , 同期か非同期か )
の「送信するデータ」、つまり「oya」で選択した値の記述方法はどうなるのでしょうか。
また、今回の質問の場合、送る側のcgiと受け取る側のcgiは同じ、
つまり、同じ画面を開くのですが、
その場合、「printとかechoで出力するだけです」の記述方法はどうなるのでしょうか。
大変、初歩的な質問で誠に恐縮ですが、宜しくお願いします。
No.1
- 回答日時:
<画面全体がリフレッシュされるため、他の入力中の項目がクリアされてしまいます。
>レガシーな手法だと、クッキーとかセッション変数とかを使ってCGI側で再セットして
出力なんでしょうが、javascript使っていいならAJAXが使えると思います。
cgiはoyaを受け取ってkoの<select>部分のみを出力するCGIを作って下さい。
ボタンのクリックでサブミットするのでなく、AJAX通信で、oyaをPOSTします。
レスポンスのテキストを受け取って、javascriptのDOM操作で、新しい
セレクトボックスを作るようにします。
具体的には、XMLHttpRequestで探すと例が見つかると思います。
参考
http://wiki.paulownia.jp/ajax
この回答への補足
ご回答、誠にありがとうございます。
大変申し遅れましたが、
「ajax」については全く存じ上げなく、
今回の質問の件でも、サイトを検索すると、何度か「ajax」での解決方法が書かれていましたが、
読んでもよく分からなかったので、スルーしていました。
できれば、「ajax」以外で解決したいのですが。
宜しくお願いします。
(なお、これを機会に、今後「ajax」について、少しずつ勉強していきたいと考えております。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- PHP 重複を防ぐ記述について教えて下さい。 3 2023/04/03 14:35
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- CGI htmlからパラメータで、cgiに渡したい。 1 2023/02/06 16:15
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Ajax以外で、JavaScriptからPHP...
-
現在日付を初期値にするには
-
正整数の半角数字かどうか判定する
-
JavaScriptでテキス...
-
「終了していない文字列型の定...
-
ASP(VBS) ←→ JavaScript の変数...
-
VB.NET2003 テキストボックスに...
-
Vba SelStart、SelLen教えてく...
-
JSPの処理の途中で、JavaScript...
-
「光の三原色」みたいな「三つ...
-
Javascriptエラーの原因が分か...
-
csvファイルを読み込み、該当項...
-
Win版IllustratorCS3でJavascri...
-
VBScript から JavaScript を呼...
-
初心者です。gulpでコンパイル...
-
C#でボタン名を変更しても動く
-
時間稼ぎの命令文とは?
-
ASPでエクセルの起動
-
javascript:void(0)とは何でし...
-
Excel vba 配列内の最大値を求...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
助けてください!スパムメール...
-
PHP処理実行後のページの遷移に...
-
「戻る」ボタン使用時のフォー...
-
指定した日時にリロード処理を...
-
POSTでリダイレクト
-
Onclickイベントでデータをcgi...
-
javascript中の記述でのJSP文<%%>
-
フォーム入力の自動切換え
-
Ajax以外で、JavaScriptからPHP...
-
親フォームのHiddenに子フォー...
-
javascriptからpythonへ値の受...
-
javascript 「戻る」を押したと...
-
javascript・JSP関連
-
javascript と php の、フォー...
-
Jquery を使った住所情報の自...
-
毎週決まった曜日から数日間だ...
-
現在日付を初期値にするには
-
連動プルダウンについてです。
-
if(1){...}とはどういうことで...
-
Vba SelStart、SelLen教えてく...
おすすめ情報