submit()

jQuery API の submit() は、サブミットイベントを実行するメソッド。サブミットイベント時の、ブラウザのデフォルト動作と、submit( fn )などでバインドしたイベントハンドラを実行する。サブミットイベントとは、フォームを送信するイベントのこと。

submit() は、「A要素のイベント時に、B要素のサブミットイベントを実行させたい」時などに便利だ。

記述方法

jQuery( セレクター ) . submit();

「セレクター」の要素のサブミットイベントを実行する。

実装例(サンプル)

送信

実装例(サンプル)の動作について

  1. 入力欄に何も入力せずに送信ボタンを押すと、入力欄の右側に、「この項目は、入力必須です。」と赤い色のテキストで表示する。
  2. 入力欄に何か入力して送信ボタンを押すと、入力欄の右側の「この項目は、入力必須です。」という赤い色のテキストを消し、送信ボタンの下側に「送信内容:」と入力欄に入力した内容を表示し、送信完了ダイアログを出現させる。

実装例(サンプル)のソースコード

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>

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>

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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, フォーム, フォーム・イベント パーマリンク