みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

form 内 onChange

恐れいります。
<form>内で、もう一つ<form>を作成し、送信したいのですが、
なかなかうまくいきません。form内のformは、selectボックスで、選択時に自ページにsubmitさせるようにしたいのですが。。

<form action="./xxx.cgi" method="POST">
<input type="text" name="xxx">
<form action="./" method="POST">
<select name="YYY" onChange="this.form.submit()">
<option value="ddd">ddd
<option value="eee">eee
</select></form>
<input type="text" name="xxx">
<input type="submit" value="送信">
</form>

よろしくお願いします。

投稿日時 - 2017-07-11 06:44:03

QNo.9350598

困ってます

質問者が選んだベストアンサー

> しかし、<input type="hidden" name="YYY">以外の情報も、
> hiddenで送信しようと思ったらできませんでした。。。
> 複数hiddenでの情報を送信することは可能ですか?

必要な分だけ<input>タグを増やして、JavaScriptで値を書き込むだけです。
例えば、2つ目の<form>内に
<input type="hidden" name="xxx">
を追加し、JavaScriptのfunc1関数内でsubmitの前に
document.form1.xxx.value =form.xxx.value;
を追加するといった感じです。

投稿日時 - 2017-07-12 13:00:52

お礼

ありがとうございました。無事送信できました。

投稿日時 - 2017-07-13 09:37:19

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

> 別サイトで見たのですが、
> これをonChangeで実行したい思っています。

その別のサイトはちゃんと <form> ~ </form> <form> ~ </form> と分けて書いてて、後に書いてある2つのフォームは JaqvaScript を使って値をセットして submit を実行しています。
それを真似れば同じような事はできます。

こんな感じでしょうかね、動作確認はしてないのでご自身でデバッグしてください。
==========
<script>
function func1(form){
document.form1.YYY.value =form.YYY.value;
document.form1.submit();
}
<script>
<form action="./xxx.cgi" method="POST">
<input type="text" name="xxx">
<select name="YYY" onChange="func1(this.form)">
<option value="ddd">ddd
<option value="eee">eee
</select>
<input type="text" name="xxx">
<input type="submit" value="送信">
</form>
<form name="form1" action="./" method="POST">
<input type="hidden" name="YYY">
</form>

投稿日時 - 2017-07-11 12:56:24

お礼

ありがとうございます。無事送信できました。
しかし、<input type="hidden" name="YYY">以外の情報も、
hiddenで送信しようと思ったらできませんでした。。。
複数hiddenでの情報を送信することは可能ですか?

質問が増えてしまっていますが、ご教授頂けたら助かります。

投稿日時 - 2017-07-12 12:41:16

ANo.1

<form> ~ </form> の中にもう一つ <form> ~ </form> を入れるの HTML の規定上 NG なので<form> ~ </form> <form> ~ </form> と二つ並べるようにする必要があります。

投稿日時 - 2017-07-11 10:10:25

補足

別サイトで見たのですが、
これをonChangeで実行したい思っています。

<title>SAMPLE</title>
<meta http-equiv="Content-Type" content="text/html;charset=EUC-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/javascript">
<!--
//<クリックした時に実行される関数>
//*** 英和辞書
function func1(form){
document.form1.MT.value =form.TXT.value;
document.form1.submit();
}
//*** サーチ
function func2(form){
document.form2.MT.value = form.TXT.value;
document.form2.submit();
}
//-->
</script>
</head>

<body>
<!---実際に画面表示されるフォーム--->
<form>
<input type="text" name="TXT" value="Congratulation" size="40"><br>
<input type="button" onClick="func1(this.form)" value="Eng-JP">
<input type="button" onClick="func2(this.form)" value="goo">
</form>

<!-- 辞書用の仮想フォーム -->
<form name="form1" method="GET"
action="http://dictionary.goo.ne.jp/cgi-bin/dict_search.
<input type="hidden" name="MT">
<input type="hidden" name="sw" value="0">
</form>

<!--- サーチ用の仮想フォーム --->
<form name="form2" method="GET"
action="http://search.goo.ne.jp/web.jsp">
<input type="hidden" name="MT">
</form>

投稿日時 - 2017-07-11 12:03:03