htmlでテキストを書いてエンターしたときと、ボタンをクリックしたときで、別の内容を受けとりたいです。

こんにちは。
Windows10でweb serverのアプリケーションを開発しています。

###前提・実現したいこと
htmlでテキストを書いてエンターしたときと、ボタンをクリックしたときで、別の内容を受けとりたいです。

###該当のソースコード

html
1<html><body>
2<form action='test.cgi' method='post'><input type='text' name='name' style='font-size:5em;'>
3<button type='submit' name='name' value='next' style='font-size:3em;'>next</button>
4<button type='submit' name='name' value='stop' style='font-size:3em;'>stop</button>
5</form>
6</body></html>

###試したこと
このコードだと、サーバー側で受けたときに、name='テキストボックスの文字列'&name='next'&name='stop'となります。

###発生している問題・エラーメッセージ
テキストに入力している場合とそれ以外は区別できますが、nextとstopは区別できません。
このそれぞれ、つまりテキストに入力しているとき、nextボタンを押したとき、stopボタンを押したときの3通りを区別するには、htmlをどのように書けばよいですか?

よろしくお願いします。

othersight

2017/08/14 09:27

一点だけ確認したいのですが、`name=next`と`name=stop`の両方が付いてくる場合はありますか? 手元で試してみる限りでは、この2つの両方が同時に付いてくることは無いようなのですが。

cancat

2017/08/14 09:33

ほんとだ。失礼しました。チェックありがとうございます。 nextとstopは別立てで動いてました。ということは、テキストボックスでエンターを押した場合と、それ以外とを区別できればそれでオーケーということになります。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、入力データとボタンを区別するために、<input>と<button>とでname="..."の値を分けたほうが良いと思います。

また、<input type='text'>等でエンターした時の挙動は、同じ<form>要素内にあるsubmitボタン相当のもの(<input type='submit'>もしくは<button type='submit'>)のうち最初に書かれたものがクリックされたのと同じ扱いの挙動となるため、上記のコードだとvalue=nextのボタンをクリックした場合と同じ扱いになってしまいます。

このため、エンターした時とname='next'のボタンをクリックした時を区別するために何かの工夫が必要になります。あくまでも一つの案ですが、例えば、<button name='text'>のボタンの前に、目に見えないボタンを一つ加える等の細工をする方法が考えられます。

js
1<html><body>
2<form action='test.cgi' method='post'><input type='text' name='name' style='font-size:5em;'>
3<button type='submit' name='submitbutton' value='enter' style='position:absolute;visibility:hidden;pointer-events:none;bottom:0;right:0;'>next</button> <!-- 見えないボタン(エンターで入力された場合に反応) -->
4<button type='submit' name='submitbutton' value='next' style='font-size:3em;'>next</button>
5<button type='submit' name='submitbutton' value='stop' style='font-size:3em;'>stop</button>
6</form>
7</body></html>