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ベストアンサー
- 回答日時:
サンプルを作りました。
参考にして考えてやってみてください。'********** ここから **********
<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
- 回答日時:
そうですね。
ご希望のことであれば、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
- 回答日時:
質問にかかれているソースを予測される型に変更しています。
以下のようにしては如何でしょう。
'********** ここから **********
<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>
'********** ここまで **********
この回答への補足
さきほどはありがとうございました。
追加でお尋ねしたいのですが、
例えば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
- 回答日時:
う~ん、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ぐちゃぐちゃのソースですみません。
ソースは、データを別ページにおくるものと、プルダウンでリンクをとばすものを
合わせてみようとしたのですが、お見苦しいものですみません。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリアの行頭行末に指...
-
onchangeイベントを強制的に発...
-
jQueryで設定したイベントハン...
-
追加ボタンを押した際に ok ボ...
-
計算の結果、整数でも小数点以...
-
IEで,テキストエリアの選択範...
-
【javascript】ボタンクリック...
-
【UWSC】HTML内のある部分を抽...
-
3つのselectでURLパラメータを...
-
ボタン無しでフォーム内容送信
-
return trueとreturn falseの用...
-
正規表現で複数マッチ条件で悩...
-
クリックされた罫表セルの行番...
-
iframe内のformをサブミットす...
-
jQueryで特定のチェックボック...
-
引数に数値、文字列の混在
-
複数のプルダウンを1つにまとめ...
-
一つのチェックボックスのON/OF...
-
送信フォームで送信ボタンをお...
-
ボタン押下すると一行テキスト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
JavascriptでDOM-based XSSの発...
-
onclickが動作しない
-
クリックさせたいが、click()が...
-
追加ボタンを押した際に ok ボ...
-
innerHTML内では改行は禁止?
-
ボタンかリンクをクリックする...
-
formのfileの値をhiddenでも持...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
VB.NETで<Input>タグ、<text...
-
受け取ったパラメータが文字化け
-
JQueryでfunctionに引数としてI...
-
javascriptで作成されたテーブ...
-
jQueryで設定したイベントハン...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
BackSpaceしたい(QNo.2734284の...
-
URL 判定
おすすめ情報