テキストボックスとsubmitボタンの紐づけ方法について教えてください

例えば

index.php:
<?php
$self=$_SERVER['SCRIPT_NAME'].'?'.htmlspecialchars(SID);
print<<<EOL

<form method="post" action="{$self}">

<input type="text" name="tx1" value="txval1"/>
<input type="text" name="tx2" value="txval2"/>
<input type="submit" name="sb1" value="sbval1"/>
<input type="submit" name="sb2" value="sbval2"/>
<br/><br/>
<br/><br/>
text1={$_POST['tx1']}<br/>
text2={$_POST['tx2']}<br/>
submit1={$_POST['sb1']}<br/>
submit2={$_POST['sb2']}<br/>
<br/><br/>
<br/><br/>

</form>

EOL;
?>


においてtx1入力ボックスにフォーカスをしエンターキーを叩くと
sb1ボタンを押したときと同じ出力が得られます

tx1入力ボックスにフォーカスをしエンターキーを叩いたときに
sb1ボタンでなくsb2ボタンを押したときの出力にするにはどうしたらいいでしょうか？

つまり今は
tx1入力ボックスにsb1ボタンが紐づいていますが
tx1入力ボックスにsb2ボタンが紐づくようにしたいのですが
どうしらいいでしょうか？

質問者からの補足コメント

• 回答ありがとうございます
  複数フォームに分割してしまうと
  複数テキストに記載された全てのデータを取得して処理したいのでNGです
  スクリプトでやる方法は最後の手段として考えます
  複数のsubmitボタンを1つのフォームに配置して場合に
  フォーム内のどのテキストボタンをクリックしても最初に記載されているsubmitボタンを
  プッシュしたことになるのが少なくともfirefox,ie,edgeの動作のようです
  この規則を変更する方法（特定のテキストと特定のボタンを紐づける方法）が
  htmlの仕様にあればよいのですが
  一つのフォームに1つのsubmitボタンだけがある想定でhtmlが作成されているのかもしれません
  しかしテキストエンターをしないという前提ならば複数ボタンの使用は価値があるのでこれを使わないわけにはいきません

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/05/25 20:32

No.2 回答者： fujillin 回答日時： 2021/05/25 22:38

No1です

＞複数テキストに記載された全てのデータを取得して処理したいのでNGです

ですので、No1には、
＞hidden要素の値をスクリプト等で整合させて修正する。
と書きました。
（まぁ、スクリプトを利用することに変わりはありませんけれど・・・）

No.1 ベストアンサー 回答者： fujillin 回答日時： 2021/05/25 18:06

こんにちは

＞tx1入力ボックスにsb1ボタンが紐づいていますが
紐づいているわけではないと思います。
単に、input要素でEnterを押すとformがsubmitされるという仕様に基づいているだけではないでしょうか。
submit要素が複数ある場合の挙動について、仕様書にあるのかを調べてはいませんけれど、ブラウザ依存かもしれません。
（ご提示の例では、先に記述のあるサブミットが優先されているものと想像されます）

>tx1入力ボックスにsb2ボタンが紐づくようにしたいのですが
ひとつの方法として、
<form1>
<text1>
<text2>：非表示
<sumit2>
</form1>
と
<form2>
<text1> ：非表示
<text2>
<sumit1>
</form2>
に分けて記述しておき、
・CSSで表示順を希望するように調整
・それぞれの要素でsubmitされた際に、hidden要素の値をスクリプト等で整合させて修正する。
などとしておけば、実現できそうに思われます。


一方で、どうせスクリプトを利用するのであれば、ご提示のHTMLのままでも「tx1でEnterが押されたら、sb2をクリックする」という処理を加えるだけでも良さそうに思います。
（こちらであれば、レイアウトを調整する必要はなくなりますし。）
・・・ということで、HTMLの</form>の記述より後に、以下の、<script>～</script>の記述を追加してみて下さい。

※ 文書の全体構成が不明なので、ご提示の文書用に最低限の記述になっています。
　文書が複雑な場合は、セレクタ等の修正が必要と思われますのでご注意。

<script>
document.querySelector('form').addEventListener('keydown', function(e){
if(e.target.name == 'tx1' && e.key=='Enter'){
e.preventDefault();
e.target.form.elements['sb2'].click();
}
});
</script>

この回答へのお礼

結局、スクリプトにしました
提示のコードを編集して使わせていただきました
ありがとうございました

お礼日時：2021/05/26 13:33