プルダウンで選択したページにフォームデータを送る

質問

a.htmlからプルダウンで選択した1～6までのhtmlに、フォームデータを送る
ということは可能でしょうか？

いろいろ組み合わせたりしていますがうまくいきません。
どなたかご教授お願い致します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function jumpMenu(){
location=(document.link.list.options
[document.link.list.selectedIndex].value);
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//
sendURL = " jumpMenu()";
function sendData()
{
sData = escape(doument.myFORM.theData.value);
Location.href = sendURL + "?"+sData;
}
//-->
</SCRIPT>
<form name="myFORM">
<SELECT NAME="list">
<OPTION VALUE="1.html" SELECTED>1</OPTION>
<OPTION VALUE="2.html">2</OPTION>
<OPTION VALUE="3.html">3</OPTION>
<OPTION VALUE="4.html">4</OPTION>
<OPTION VALUE="5.html">5</OPTION>
<OPTION VALUE="6.html">6</OPTION>
</SELECT>
<INPUT TYPE="TEXT" SIZE="61" NAME="a">
<INPUT TYPE="submit" VALUE="GO" onClick="sendData()"> <INPUT TYPE="reset" VALUE="クリア">

回答No.4

BlueRay · ベストアンサー

サンプルを作りました。参考にして考えてやってみてください。

'********** ここから **********
<SCRIPT LANGUAGE="JavaScript">
<!--
//テキストボックスから値の取得
// obj : テキストボックスの名前
function getTextbox(obj)
{
return (document.myFORM.elements(obj).value);
}
//チェックボックスから値の取得
// obj : チェックボックスの名前
function getCheckbox(obj)
{
if (document.myFORM.elements(obj).checked == true){
return (document.myFORM.elements(obj).value);
} else {
return ("");
}
}
//リストボックスから値の取得
// obj : リストボックスの名前
function getSelect(obj)
{
return (document.myFORM.elements(obj).options[document.myFORM.elements(obj).selectedIndex].value);
}
//各値の取得後、テキストエリアに表示
function getDispData()
{
var sDispData;
sDispData = "theData:" + getTextbox("theData") + "\n";
sDispData = sDispData + "theData2:" + getTextbox("theData2") + "\n";
sDispData = sDispData + "1:" + getCheckbox("1") + "\n";
sDispData = sDispData + "2:" + getCheckbox("2") + "\n";
sDispData = sDispData + "address:" + getSelect("address");

document.myFORM.elements("DispData").value = sDispData;
}
//-->
</SCRIPT>
<form name="myFORM">
theData:
<INPUT TYPE="TEXT" SIZE="61" NAME="theData"><BR>
theData2:
<INPUT TYPE="TEXT" SIZE="61" NAME="theData2"><BR>
1:
<INPUT TYPE="checkbox" NAME="1" VALUE="1"><BR>
2:
<INPUT TYPE="checkbox" NAME="2" VALUE="2"><BR>
性別:
<SELECT NAME="address">
<OPTION SELECTED VALUE="">▼性別
<OPTION VALUE="男">男
<OPTION VALUE="女">女
</SELECT>
<BR><BR>
<INPUT TYPE="button" NAME="getValue" VALUE="データ表示" onClick="getDispData();">
<BR><BR>
<TEXTAREA NAME="DispData" COLS="50" ROWS="5"></TEXTAREA>
</form>
'********** ここまで **********

お礼

本当に有り難うございました。
合わせて、自分でもcgiに送るという方法も考えてみました。
データを送る方法も自分なりに考えて動作するようになりました。
とても勉強になりました。

回答No.3

noname#3345

そうですね。
ご希望のことであれば、BlueRayさんの書かれたソースで実現可能だと思います。

あえてあげれば、
document.myFORM.method = "post";
は、直接
<form name="myFORM" METHOD="POST">
と書いてしまった方がいいかもしれません。

ただ、ちょっと気になったんですが、
> 1.htmlから6.htmlのいずれかのページに送り、ページ内に送られたデータをためて、
> そこからまた追加のフォームを入力してcgiにデータを送るということがしたいのです。
という事は、SELECTで渡る先はCGIではないという事なんですね？
だとしたら、METHODはPOSTではなく、GETでないと、引渡しはできません。
(HTMLファイルではPOSTの情報を受け取れないので）
ただし、GETは環境変数ですので、引渡しのできる文字列長の制限があります。
（長さのMAXはサーバーの設定によります）

SELECTで渡る先がCGIであれば、POSTの変数を受け取って、hiddenフォームにいれておけば、追加情報とともにその先のCGIに引き渡すことは可能です。
そこらへんを注意なさってください。

お礼

ご忠告ありがとうございます。
色々勉強になりました。

回答No.2

BlueRay

質問にかかれているソースを予測される型に変更しています。
以下のようにしては如何でしょう。

'********** ここから **********
<SCRIPT LANGUAGE="JavaScript">
<!--
function jumpMenu(){
return (document.myFORM.list.options[document.myFORM.list.selectedIndex].value);
}
function sendData()
{
var sData = escape(document.myFORM.theData.value);
document.myFORM.method = "post";
document.myFORM.action = jumpMenu();
document.myFORM.submit();
}
//-->
</SCRIPT>
<form name="myFORM">
<SELECT NAME="list">
<OPTION VALUE="1.html" SELECTED>1</OPTION>
<OPTION VALUE="2.html">2</OPTION>
<OPTION VALUE="3.html">3</OPTION>
<OPTION VALUE="4.html">4</OPTION>
<OPTION VALUE="5.html">5</OPTION>
<OPTION VALUE="6.html">6</OPTION>
</SELECT>
<INPUT TYPE="TEXT" SIZE="61" NAME="theData">
<INPUT TYPE="submit" VALUE="GO" onClick="sendData()"> <INPUT TYPE="reset" VALUE="クリア">
</form>
'********** ここまで **********

お礼

BlueRayさん
どうもありがとうございます！
さっそく試してみます。

補足

さきほどはありがとうございました。
追加でお尋ねしたいのですが、
例えばa.htmlのフォームに
<INPUT TYPE="TEXT" SIZE="61" NAME="theData">
<INPUT TYPE="TEXT" SIZE="61" NAME="theData2">
<INPUT TYPE="checkbox" NAME="1" VALUE="1">
<INPUT TYPE="checkbox" NAME="2" VALUE="2">
<SELECT NAME="address">
<OPTION SELECTED VALUE="">▼性別
<OPTION VALUE="男">男
<OPTION VALUE="女">女
</SELECT>の項目がある場合
javascriptの部分はどうかわるのでしょうか？

また受ける方の1.htmlのjavascriptの部分も教えていただけますでしょうか？
素人考えで、受ける方に同じ<INPUT TYPE="TEXT" SIZE="61" NAME="theData"> が入っていれば
データが移るのかとおもいましたが、、、うまくいきませんでした。
よろしくお願い致します。

回答No.1

noname#3345

う～ん、doument.myFORM.theData.value ってのはなんなんでしょう？
見たところ、theDataっていう名前のフォームエレメントはなさそうですが・・・。（＾＾；；

もし、値とhtml名が同じなのであれば、

<SELECT NAME="list">
<OPTION VALUE="1" SELECTED>1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="5">5</OPTION>
<OPTION VALUE="6">6</OPTION>
</SELECT>

としておいて、

<SCRIPT LANGUAGE="JavaScript">
<!--
//
function sendData()
{
document.myForm.action = document.myForm.list[document.myForm.list.selectedindex].value + ".html";
document.myForm.submit();
}
//-->
</SCRIPT>

とすれば、2が選択されれば、2.htmlにlist=2という情報が渡ります。
値とhtmlの名前が異なるのであれば、
1.SELECTのVALUEにカンマ区切りなどで両方の値を持たせ、分割して飛び先と引数にする。
2.Javascriptソースの中に飛び先情報を持たせ、選択された値によって、どこに飛ぶか制御する
などの方法が考えられます。

ソースと質問からは上記のような推察しかできませんでした。
1～6までのhtml全てに値を渡したい訳では無いですよね？
また、theDataが何をさすのか？
aという名前のtextフィールドはなんのか？
等、ちょっとソース上からは何をされたいのかわかりません。

どういう情報をどう渡したいのか、そこらへん補足していただければ、もうちょっと具体的なアドバイスが集まるかも。

補足

Prynneさん素早い回答有り難うございます。
確かに説明不足すぎますね申し訳ございません。
まずやりたいことは、a.htmlの中に、
たとえば氏名や住所を入力したりチェックボックスで、
項目を選んだ複数のフォームのデータを、

1.htmlから6.htmlのいずれかのページに送り、ページ内に送られたデータをためて、
そこからまた追加のフォームを入力してcgiにデータを送るということがしたいのです。

うーjavascriptぐちゃぐちゃのソースですみません。
ソースは、データを別ページにおくるものと、プルダウンでリンクをとばすものを
合わせてみようとしたのですが、お見苦しいものですみません。。。