複数フレームへFORMデータをわたすには？
[上に]
[前に]
[次に]
キャップ
[E-Mail]
2000/03/31(金) 19:45:58
フレーム1、2で構成されたページで
フレーム1のボタンクリックで、フレーム1がフレーム2から
フォームデータを受信し、フレーム1、フレーム2をそれぞれ
ターゲットとしたCGIを動作させようとしています。
以下のようなアプローチをとっていますが、CGIは動作しま
すが、フォームデータがうまく渡りません。間違いがあれば
おしえてください。
Form1.htmlで以下のように記述しました。
<SCRIPT LANGUAGE="JavaScript">
function get_param() {
document.form.element.value = parent.data.document.form.element.value;
return false;
}
function jump(cgi1, cgi2) {
window.parent.frame1.location.href = cgi1;
window.parent.frame2.location.href = cgi2;
return false;
}
</SCRIPT>
<FORM>
<INPUT TYPE=SUBMIT onClick= "get_param(); return jump('aaa.cgi', 'bbb.cgi')">
<INPUT TYPE="HIDDEN" NAME="url">
</FORM>
H&A
2000/03/31(金) 20:22:40
フォームデータを渡してあげるには、URL 中にパラメータをセットしてあげる必要があります。
具体的には、
<SCRIPT LANGUAGE="JavaScript">
function get_param() {
document.form.element.value = parent.data.document.form.element.value;
return false;
}
function jump(cgi1, cgi2) {
param = "url=" + escape(document.myform.url.value);
window.parent.frame1.location.href = cgi1 + "?" + param;
window.parent.frame2.location.href = cgi2 + "?" + param;
return false;
}
</SCRIPT>
<FORM name="myform">
<INPUT TYPE=SUBMIT onClick= "get_param(); return jump('aaa.cgi', 'bbb.cgi')">
<INPUT TYPE="HIDDEN" NAME="url">
</FORM>
としてあげればうまくいくのではないかと思います。
H&A
2000/03/31(金) 20:25:49
すみません、ちょっと勘違いしていました。
"data", "frame1", "frame2" というのは、それぞれどのような構成のフレームでしょうか？
H&A
2000/03/31(金) 20:47:55
今試したところ、以下のような記述でパラメータがわたっているのを確認しました。
なお、それぞれのファイルは一部省略しています。
[親フレーム]
<FRAMESET ROWS="50%,*">
<FRAME NAME="frame1" SRC="frame1.html">
<FRAME NAME="frame2" SRC="frame2.html">
</FRAMESET>
[フレーム1]
H&A
2000/03/31(金) 20:49:58
すみません、うっかり「送信」押してしまいました…
なんか「うっかり」ばっかりですね。
[親フレーム]
<FRAMESET ROWS="50%,*">
<FRAME NAME="frame1" SRC="frame1.html">
<FRAME NAME="frame2" SRC="frame2.html">
</FRAMESET>
[フレーム1]
<head>
<script language="JavaScript">
function fire()
{
var dataform = parent.frame2.document.dataForm;
var param = "";
for(i = 0; i < dataform.elements.length; i++)
param += dataform[i].name + "=" + escape(dataform[i].value) + "&";
parent.frame1.location.href = "frame1.html?" + param + "dummy=yes";
parent.frame2.location.href = "frame2.html?" + param + "dummy=yes";
return false;
}
</script>
</head>
<body>
<FORM onSubmit="return fire();">
<INPUT TYPE="submit" value="ふぁいあ">
</FORM>
</body>
[フレーム2]
<FORM name="dataForm">
<INPUT TYPE="hidden" name="hoge" value="noenoepu">
<INPUT TYPE="text" name="foo">
</FORM>
なお、確認は Internet Explorer 5.01 でのみ行ったので、他の環境ではうまくいかないかもしれません。
H&A
2000/03/31(金) 20:54:12
上記のスクリプト、"dummy=yes" が邪魔ですね。
for(i = 0; i < dataform.elements.length; i++) {
param += (i > 0) ? "&" : "?";
param += dataform[i].name + "=" + escape(dataform[i].value);
}
parent.frame1.location.href = "frame1.html" + param;
parent.frame2.location.href = "frame2.html" + param;
としましょう。
ひよこ
2000/04/04(火) 16:34:19
しばらく不在にしてたため、リプライが遅れてしまいました。
H&Aさん、アドバイスありがとうございます。
実は別の方法で解決してしまいました。
1つ質問なのですが、FORMを利用した場合には、
上記のようなパラメータをURLエンコーディングは
自動的にされるという認識だったのですが、
これは間違っているでしょうか？
＃すごい初心者なので、ハズした質問だったらすみません
H&A
2000/04/04(火) 16:42:07
> 実は別の方法で解決してしまいました。
あ、そうだったのですか。
なんにせよ、解決おめでとうございます。
> 1つ質問なのですが、FORMを利用した場合には、
> 上記のようなパラメータをURLエンコーディングは
> 自動的にされるという認識だったのですが、
フォームの submit をブラウザ任せにする場合は、正しい認識だと思います。
ただし、今回の場合は「JavaScript でフォームの要素とその値を取得し、パラメータを持った URL として location.href にセットする」という処理です（submit は行われません）ので、URL にする段階で escape() する必要があります。
ブラウザ／サーバによっては escape() しなくてもうまくいくかもしれませんが、どんな環境でも動作するように escape() したほうがいいのではないかと思います。
H&A
2000/04/04(火) 16:43:27
…って、「キャップさん」=「ひよこさん」ですよね？
ひよこ
2000/04/04(火) 16:47:54
しばらく不在にしてたため、リプライが遅れてしまいました。
H&Aさん、アドバイスありがとうございます。
実は別の方法で解決してしまいました。
1つ質問なのですが、FORMを利用した場合には、
上記のようなパラメータをURLエンコーディングは
自動的にされるという認識だったのですが、
これは間違っているでしょうか？
＃すごい初心者なので、ハズした質問だったらすみません
キャップ＆ひよこ
2000/04/04(火) 16:53:29
[[解決]]
はい、ひよことキャップは同一人物です。
すみません、間違えて前回の再送信してしまいました。
H&Aさん、ありがとうございます。
今回はローカルな環境なのでescapeなしでいきますが、
公開するときには留意しておくようにします。
[上に]
[前に]
[次に]