送信ボタンをエンターで動作させたい

質問

もしかするととても簡単なことかもしれませんが、皆さんよろしくお願いします。

ひとつのページの中にフォームが2つ以上あったとします。

そして画面で言うと、画面のヘッダー部分に、サイト内検索の為のフォームがあって、中段くらいにお問合せの為のフォームがあったとします。

そしてここからが皆さんに教えて頂きたいところなんですが、
今の状態で、エンターボタンを押すと常に検索フォームのサブミットボタンが動作してしまいます。

本当はお問合せ内容を入力したときは、お問合せのフォームの送信ボタンがエンターで動作して、検索フォームのテキストを入力したときは、検索用のフォームのサブミットボタンが反応してほしいと思っています。

入力したフォームによってそれぞれのサブミットボタンがエンターで動作するようにしたいんですが。。。

単純なことかも知れませんが、はまっています。どうぞよろしくお願いいたします。

回答No.3

darlinr · ベストアンサー

No1です。

例文で書いていただいたhtmlの下のformのsubmitタグから
name部分を削除してみてから試してください。

お礼

ありがとうございました。

原因はMETHODをPOSTにしていたんですがGETににすることにより、
思っていた動作が得られました。

本当にありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

とりあえず、文法違反を正してみてはいかがでしょうか。
HTMLでは<input>、XHTMLでは<input />と書きます。
それ以外にも</div>とか</td>とか、不正が多いです。

> 検索のテキストボックスに文字を入力し、エンターボタンを押しても、クリックしたときと違う動作をしてしまいます。
書かれているHTMLが違うので、違う動きはしますが、
それぞれ文法や仕様に則った、正しい動作をしていると思います。

> 上のフォームのテキストボックスに文字を入れてエンターを押すとちゃんとした動きをします。

一応確認しておきたいのですが、「ちゃんとした動作をしない」というのは、
「送信しない（ページを移動しない）」ということなのか、
ページは移動するが、search_data=%E6%A4%9C%E7%B4%A2というデータ（UTF-8の場合）が送信されない
ということなのか、どっちでしょうか？

テキストフィールドでエンターキーやリターンキーを押して送信した場合は、search_data=%E6%A4%9C%E7%B4%A2というデータは送られません。
検索ボタンを押してフォームを送信した場合は、検索ボタンのデータを送ります。
これは文法どおりであり、ブラウザの仕様、動作として正しい動作です。

どうしても送信したければhiddenフィールドなどに書いておいて、submitにはnameを付けずに書くようにしてください。

お礼

文法違反を見てみたんですが、
それより以前の問題でした。

原因はMETHODをPOSTにしていたんですがGETににすることにより、
思っていた動作が得られました。

ご丁寧にお答えいただき本当にありがとうございました。

回答No.1

darlinr

<form name="f1" action="hoge.html">
お問い合わせ：<input type="text" name="t1">
<input type="submit">
</form>
<form name="f2" action="hoge.html">
検索：<input type="text" name="t2">
<input type="submit">
</form>

こんな感じでフォームを分けてみてはいかがでしょうか。
※上記のソースは動作確認しておりません。

補足

早速のご回答ありがとうございます。

上記ご回答のようにフォームは分けております。

フォームを分けているんですが、
<form name="f1" action="hoge.html">
お問い合わせ：<input type="text" name="t1">
<input type="submit">
</form>
<form name="f2" action="hoge.html">
検索：<input type="text" name="t2">
<input type="submit">
</form>
とHTMLで書くと検索のテキストボックスに文字を入力し、エンターボタンを押しても、クリックしたときと違う動作をしてしまいます。

ちなみにソースは
<form action="test.php">
　<input type="text" name="search_text">
　<input type="submit" value=" GO "><br />
　<input type="radio" checked="checked">商品名検索<br />
　<input type="radio">A検索<br />
　<input type="radio">B検索<br /></div>
</form>
と
<form method="post" action="sozai_search.php">
<input type="radio" value="A" name="kind">
　<input type="radio" value="B" name="kind"></td>
　<input type="text" name="search_text" size="35" value="" />　
　<input type="submit" name="search_data" value="検索">
</form>

にしています。
下のフォームのテキストボックスに文字を入れて、エンターを押しても
動きませんが、上のフォームのテキストボックスに文字を入れてエンターを押すとちゃんとした動きをします。

フォームを分ける以外に何か必要なのでしょうか？

よろしくお願いします。