jQuery

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

More than 3 years have passed since last update.

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