[HTML]formをエンターで送信したい

HTML/CSS,JavaScript

こんにちは、しきゆらです。

急に暑くなってきた今日この頃、いかがお過ごしでしょうか。

 

今回は、HTMLのお話です。

 

HTMLのformタグで、エンターを押した時に送信したい、という場面になりました。

しかも、送信する部分に関してはJSでコードを書いていました。

例としては、以下のような感じ。

<form>
　　<label for="user_id">ユーザID：</label>
　　<input type="text" id="user_id" name="user_id">
　　<button type="button">ログイン</button>
</form>

ユーザ名IDを入力してもらい、ボタンを押すと入力された情報をサーバへ送りログイン処理を行う、というもの。

これを、エンターを押した時も同じように処理してほしい、というのが今回の話。

 

サーバサイドのスクリプトも自分で書いていたので、HTMLのsubmitに合わせてデータを取得できるようにすればいいんですが、面倒だったのでlogin関数でなんとかできないかな、と思っていました。

結論としては、formタグに「onsubmit="return login();"」と書き込んで、

login関数で 「return false;」とすれば解決でした。

<form onsubmit="return login();">
　　　　<label for="user_id">ユーザID：</label>
　　　　<input type="text" id="user_id" name="user_id">
　　　　<button type="button">ログイン</button>
</form>
function login(){
  // なんらかの処理
  return false;
}

onsubmitは、onclickのように関数名を渡せばいいんだと思っていましたが、違うようですね。

onsubmitは、関数等の処理を返す必要があるようです。

 

ただ関数がreturnすればいいのではなく、その値をさらにリターンするイメージですかね。

参考：onsubmitの戻り値をfalseにしてsubmitを実行しない（中断させる）方法 – 小粋空間

 

また、テキストボックスの数によっても挙動が異なるようです。

参考：【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 – SOFTELメモ

 

知らないことがたくさんありますね。

今回はここまで。

おわり。

Posted by しきゆら