search
LoginSignup
151
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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();
  });
})

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
What you can do with signing up
151
Help us understand the problem. What are the problem?