jQuery API の submit() は、サブミットイベントを実行するメソッド。サブミットイベント時の、ブラウザのデフォルト動作と、submit( fn )などでバインドしたイベントハンドラを実行する。サブミットイベントとは、フォームを送信するイベントのこと。
submit() は、「A要素のイベント時に、B要素のサブミットイベントを実行させたい」時などに便利だ。
記述方法
jQuery( セレクター ) . submit();
「セレクター」の要素のサブミットイベントを実行する。
実装例(サンプル)
実装例(サンプル)の動作について
- 入力欄に何も入力せずに送信ボタンを押すと、入力欄の右側に、「この項目は、入力必須です。」と赤い色のテキストで表示する。
- 入力欄に何か入力して送信ボタンを押すと、入力欄の右側の「この項目は、入力必須です。」という赤い色のテキストを消し、送信ボタンの下側に「送信内容:」と入力欄に入力した内容を表示し、送信完了ダイアログを出現させる。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-submit-button' ) . click( function() {
jQuery( '#jquery-api-submit' ) . submit();
} );
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-button' ) . click( function() {
jQuery( '#jquery-api-submit' ) . submit();
} );
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-bottom: 3px;
}
#jquery-api-submit-input-false {
color: red;
}
#jquery-api-submit-button {
border: 2px solid darkred;
border-radius: 15px;
background-color: pink;
padding: 3px 3px 1px 3px;
width: 80px;
font-size: 15px;
font-weight: bold;
color: darkred;
text-align: center;
cursor: pointer;
}
#jquery-api-submit-button:hover {
background-color: yellow;
}
-->
</style>
<!--
#jquery-api-submit-input {
margin-bottom: 3px;
}
#jquery-api-submit-input-false {
color: red;
}
#jquery-api-submit-button {
border: 2px solid darkred;
border-radius: 15px;
background-color: pink;
padding: 3px 3px 1px 3px;
width: 80px;
font-size: 15px;
font-weight: bold;
color: darkred;
text-align: center;
cursor: pointer;
}
#jquery-api-submit-button:hover {
background-color: yellow;
}
-->
</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 id="jquery-api-submit-button">送信</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 id="jquery-api-submit-button">送信</p>
</form>
<p id="jquery-api-submit-true"></p>