tianlang @ ウィキ

複数のsubmitボタンで押されたボタンを取得する方法
質問者：matchori form内の、submitボタンの値が拾えません。
１つだけsubmitボタンを設置すると値が拾えますが、
２つ以上submitボタンを設置すると拾えません。
仕様上、無理なのでしょうか？

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.btn.value);
}
</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1">
<INPUT type="submit" name="btn" value="テスト2">
<INPUT type="submit" name="btn" value="テスト3">
</form>
困り度：
困っています
質問投稿日時：
03/08/14 15:45
この質問に対する回答は締め切られました。最新から表示｜回答順に表示｜良回答のみ表示回答良回答10pt
ANo.3 "submit"を"button"にしてonclickイベントでmove_post()を呼び出し、event.srcElement.valueで取得する。てのは？
(submitするときはmove_post()にフォーム名.submit();を記述)

<SCRIPT language="JavaScript">
function move_post()
{
alert(event.srcElement.value);

}
</SCRIPT>

<FORM name="frmMvPost" action="" method="post">
<INPUT type="button" name="btn" value="テスト1" onclick="move_post();">
<INPUT type="button" name="btn" value="テスト2" onclick="move_post();">
<INPUT type="button" name="btn" value="テスト3" onclick="move_post();">
</form>
回答者：you111111
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
03/08/14 16:42
ログインして投票する参考になった：0件
この回答へのお礼 IEであれば動作しました。event.srcElement.valueというのは勉強になりました。IE限定の時は是非とも使いたいと思います。ありがとうございました。

回答良回答20pt
ANo.2 > alert(document.frmMvPost.btn.value);

btnというオブジェクトが複数あるため、btnは配列になってしまうため、
document.frmMvPost.btn.valueでは値が取れません。

回避策はonClickイベントにて値をHiddenへ格納すればOKです。

_____________________________________________________________

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.onbtn.value);
}

function set_value(s_val)
{
document.frmMvPost.onbtn.value = s_val;
}

</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1" onClick="set_value('テスト1')">
<INPUT type="submit" name="btn" value="テスト2" onClick="set_value('テスト2')">
<INPUT type="submit" name="btn" value="テスト3" onClick="set_value('テスト3')">
<INPUT type="hidden" name="onbtn">
</form>

_____________________________________________________________

※テストしていないため動作は保証しません。問題ある場合にはお手数ですが何かしら手を加えてください。
回答者：Mizyu
種類：回答
どんな人：専門家
自信：参考意見
回答日時：
03/08/14 16:30
ログインして投票する参考になった：0件
この回答へのお礼 この方法であれば、Netscape4.7など古いブラウザでも動作しました。ありがとうございました。

回答
ANo.1 多分、submitボタンに与えているname属性の値が重複しているので、狙ったような動作が得られないのではないでしょうか。 name属性をそれぞれ別々の値に設定すれば、動作すると思います。

もし参照するフォーム部品の名前をbtnに統一しなければうまくないという場合は、隠しフィールドを用意してそこにそのフォーム部品の名前を与え、submit時に隠しフィールドに各ボタンの値を渡して、その隠しフィールドの方の値を取得させるような形に修正するのも対策になるかもしれません。
formの部分のソースを

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" value="テスト1" onClick="document.frmMvPost.btn.value=this.value;">
<INPUT type="submit" value="テスト2" onClick="document.frmMvPost.btn.value=this.value;">
<INPUT type="submit" value="テスト3" onClick="document.frmMvPost.btn.value=this.value;">
<input type="hidden" name="btn">
</form>

このようにしてみてはいかがでしょうか。

参考になれば幸いです。 見当違いでしたら、ごめんなさい。

↑参考URL:http://qa.asahi.com/qa627652.html [^]