jQueryでフォームの値を事前チェックしsubmitする：submit()

今回は、jQueryでフォームの値を送信（submit）する方法を説明します。

1 フォームを送信する.submit()
2 フォーム送信前にデータを処理する

フォームを送信する.submit()

submit()メソッドは、フォームを送信するメソッドです。submitボタンをクリックすればsubmitはできますが、ほかのイベントと絡めて処理したい時などに使います。

HTML

jQuery

$("#sample-form").submit();

フォーム送信前にデータを処理する

また、フォームのデータを送信する前に処理することもできます。

例えば、データのバリデーションチェックや、入力フォームに値が入力されていなければ警告ダイアログを表示する時などに使用します。

以下は、nameが空の場合、アラートを表示してsubmitをキャンセルするという例です。

HTML

jQuery：submit()を使う場合

$("#sample-form").submit(function(){
  if ($("input[name='name']").val() == '') {
    alert('入力してください');
    return false;
  } else {
    $("#sample-form").submit();
  }
});

また、submit()を用いずにon()メソッドやclick()メソッドを用いて同様の処理をすることも可能です。

jQuery：on()を使う場合

$("#submit").on('click', function(){
  if ($("input[name='name']").val() == '') {
    alert('入力してください');
    return false;
  } else {
    $("#sample-form").submit();
  }
});