jQuery API の submit( fn ) は、サブミットイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
フォームを送信しようとすると、submit( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . submit( イベンドハンドラ );
「セレクター」の要素のサブミットイベントに、「イベンドハンドラ」をバインド。
実装例(サンプル)
実装例(サンプル)の動作について
- 入力欄に何も入力せずに送信ボタンを押すと、入力欄の右側に、「この項目は、入力必須です。」と赤い色のテキストで表示する。
- 入力欄に何か入力して送信ボタンを押すと、入力欄の右側の「この項目は、入力必須です。」という赤い色のテキストを消し、送信ボタンの下側に「送信内容:」と入力欄に入力した内容を表示し、送信完了ダイアログを出現させる。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-submit' ) . submit( function() {
str = jQuery( '#jquery-api-submit-input' ) . val();
if( jQuery( '#jquery-api-submit-input' ) . val() == '' ) {
jQuery( '#jquery-api-submit-input-false' ) . text( 'この項目は、入力必須です。' );
return false;
} else {
jQuery( '#jquery-api-submit-input-false' ) . text( '' ) . show() . fadeOut( 5000 );
}
jQuery( '#jquery-api-submit-true' ) . text( '送信内容:' + str );
return true;
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-submit' ) . submit( function() {
str = jQuery( '#jquery-api-submit-input' ) . val();
if( jQuery( '#jquery-api-submit-input' ) . val() == '' ) {
jQuery( '#jquery-api-submit-input-false' ) . text( 'この項目は、入力必須です。' );
return false;
} else {
jQuery( '#jquery-api-submit-input-false' ) . text( '' ) . show() . fadeOut( 5000 );
}
jQuery( '#jquery-api-submit-true' ) . text( '送信内容:' + str );
return true;
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-submit-input {
margin: 0;
}
#jquery-api-submit-input-false {
color: red;
}
-->
</style>
<!--
#jquery-api-submit-input {
margin: 0;
}
#jquery-api-submit-input-false {
color: red;
}
-->
</style>
HTML
<form id="jquery-api-submit" action="javascript:alert('送信完了');">
<p>
<input id="jquery-api-submit-input" type="text" />
<span id="jquery-api-submit-input-false"></span>
</p>
<p><input value="送信" type="submit"></p>
</form>
<p id="jquery-api-submit-true"></p>
<p>
<input id="jquery-api-submit-input" type="text" />
<span id="jquery-api-submit-input-false"></span>
</p>
<p><input value="送信" type="submit"></p>
</form>
<p id="jquery-api-submit-true"></p>