167
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【jQuery】submit前に処理を行う方法

Last updated at Posted at 2014-04-30

submit前にバリデーションチェックや、データの加工などを行う方法。

submitイベントを利用する方法

html
<form id="form_id" method="" action="">
  <button type="submit"></button>
</form>

jQuery
$('#form_id').submit(function(){

    //
    // バリデーションチェックや、データの加工を行う。
    //

    //バリデーションチェックの結果submitしない場合、return falseすることでsubmitを中止することができる。
    return false;
})

clickイベントを付与したボタンをトリガーにする方法

ボタンのクリックイベントで、jQueryを呼び出して、バリデーションチェックや、データの加工を行った後、submitを行う。
type="button"としないとsubmitがはしるので注意。

html
<form id="form_id" method="" action="">
  <!-- type="button"を省略すると、submitされる。 -->
  <button type="button" id="btn_id"></button>
</form>
jQuery
$(function(){
  $('#btn_id').click(function(){
    //
    // バリデーションチェックや、データの加工を行う。
    //

    $('#form_id').submit();
  });
})

167
149
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
167
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?