【html5 / JavaScript】formの中に二つのボタンを置き、どちらを押したのか次のページへpostで送りたい

ちょっとややこしいものを作っていました。
それで、たくさんの情報を送っているformに、ボタンをもうひとつ追加したくなりました。
ぶっちゃけると、「戦闘終了」か「戦闘継続」みたいなやつです。

どちらのボタンを押しても、送られる情報は同じでいい。ただ、「どちらを押したのか」を知りたい。

すなわち、

formでボタンを押すと、
「ページ遷移」と「JavaScriptによるinputの書き換え」の
どちらが果たして速く実行されるのかという問題です。

結果から言うと、

html:

<form method="post" action="endbattle_exec.php">

<!-- ここに色々な戦闘の情報 略 -->

<input type="hidden" id="button_2type" name="button_2type" value="0">

<button id="b_end_battle" type="submit">戦闘終了</button>
<button id="b_continu_battle" type="submit">戦闘継続</button>
</form>

js:

  //継続ボタンクリック
  $('#b_continu_battle').on('click', () => {
    $('#button_2type').attr('value', 1);
  });

next page output:
result pattern 1 / 2 :

[button_2type] => 0
[button_2type] => 1

まさかのbuttonクリックによる「ページ遷移」より、「JavaScriptによるinputの書き換え」が先に行われた模様。
次ページでどちらのボタンが押されたのか、inputのhiddenで送った情報が来ています。

助かりましたけどちょっと驚きました。これは便利かもしれません。

kue

0

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です