document.form.actionでの処理

質問

以下のようなソースにて、

・<form>のactionでは"send.php"へPOSTしたい。
・javascriptにて、<select>で選択した値をhoge.phpへ渡したい
上記の事を実現するため、

・リストから選んだ値を画像クリックで"hoge.php"へ渡し別窓で表示
・"text"に入力した値をsubmitで"send.php"へ渡す

といった処理をしているのですが、
"hoge.php"を参照した後に"text"へ何か入力してsubmitすると
本来send.phpへとぶはずが、"hoge.php"へとんでしまいます。

何が原因なのか、また最良を方法がありましたら
ご教授頂ければと思います。

<script>
<!--
function form_submit(url){
document.form.action=url;
document.form.target = "_blank";
}
//-->
</script>
|
<FORM METHOD="POST" name="form" action="send.php">

<SELECT name="sel">
<OPTION value="001">001</OPTION>
<OPTION value="002">002</OPTION>
</SELECT>

<input type="image" src="sub.gif" onClick="javascript:form_submit('hoge.php')">
<input type="text" name="text">

<input type="submit" value="送信">
</FORM>
|

回答No.2

leaz024

> 上記のコードにて、"hoge.php"をサイズ指定やツールバー有無を指定し
> オープンさせることは可能なのでしょうか？

はい、window.open と FORM の target 属性を使うことで実現できます。

ウィンドウスタイルの指定は window.open でしかできませんから、送信前にまず window.open をします。その際、２番目の引数に「ウィンドウ名」を指定します。

そのウィンドウ名を FORM の target にも指定しておけば、送信先が先ほど開いたウィンドウになる、という寸法です。

No.1 のコードを、次のように変更して下さい。

・「function submit_hoge() {」 の次の行に、
window.open("about:blank", "hogewin", "ウィンドウスタイル");
を追加。

・hoge.php 起動用フォームの target の値を "hogewin" に変更。

※ウィンドウスタイルについては参考URLをご参照下さい。

参考URL：

http://www.tohoho-web.com/js/window.htm#OpenPage

回答No.1

leaz024

HTMLに書かれた action の値は「初期値」であり、JavaScript などで変更すればその値になってしまいます。画像をクリックした時に action の値を変更してますから、その後に submit ボタンを押せば hoge.php に飛んでしまうのは当然です。

回避策として、送信後に元の値に戻すよう細工してもよいのですが、hoge.php 用に別のフォームを用意してそちらを送信するようにした方が簡明でしょう。

<script type="text/javascript">
<!--
function submit_hoge() {
document.form_hoge.sel.value = document.form_send.sel.options[document.form_send.sel.selectedIndex].value;
document.form_hoge.submit();
}
// -->
</script>

<form name="form_send" action="send.php" method="post">
<select name="sel">
<option value="001">001</option>
<option value="002">002</option>
</select>
<img src="sub.gif" onclick="submit_hoge()">
<input type="text" name="text">
<input type="submit" value="送信">
</form>

<form name="form_hoge" action="hoge.php" method="post" target="_blank">
<input type="hidden" name="sel" value="">
</form>

hoge.php 起動用のフォームには hoge.php が必要とするパラメータを全て hidden で用意しておき、画像がクリックされたら必要な値を form_send から form_hoge にコピーして form_hoge を送信します。

※画像は単なるトリガーであり、イメージボタンである必要がないので IMG に変えました。

補足

補足というか、追加で質問なのですが、
上記のコードにて、"hoge.php"をサイズ指定やツールバー有無を指定し
オープンさせることは可能なのでしょうか？