jquery 「type="button"」「type="submit"」で送信

基本

下記のようなコトをしたいが、「type="submit"」のときは面倒。

<button type="submit">送信</button>

<script>
  $('button').on('click', function(e){
    if ( 入力チェック等でエラー ) {
        return false;
    }
    
    $(this).parents('form').submit();
  });
</script>

面倒なコト

「submit()」が実行されると「submit()」とは別にform送信が行われる（2回送信される）

回避策

「type="submit"」を「type="button"」にする

「type="button"」の問題

例えばログインフォーム
・「type="submit"」だとID入力→TAB→パスワード入力→Enterキー（送信ボタンが押下される）→Form送信
・「type="button"」だとID入力→TAB→パスワード入力→送信ボタンがフォーカスされるまでTAB→Enterキー→Form送信
→「送信ボタンがフォーカスされるまでTAB」をどうにかしたい。

イベントの伝播を止める

▼こんな感じ

<button type="submit">送信</button>

<script>
  $('button').on('click', function(e){
    e.preventDefault();
    $(this).parents('form').submit();
  });
</script>

めも

実際は、「type=button」にして・・・ID/パスワードが入力されたら「type=submit」に変更したほうが良いと思う。