2023.11.13

2023.11.14

jqueryでフォームの送信。this.submit() vs $(this).submit()

javascript/ jQuery

javascript(jQuery)でフォームの送信をする時にエラーチェックを行うことは多々あると思います。

今回はそんなエラーチェックとフォームの送信時の注意するべき点についてお話します。

1
htmlの要素
2
jQueryのコード
3
this.submit() vs $(this).submit()
4
どう違うのか

4-1

this.submit()

4-2

$(this).submit()

5
まとめ

htmlの要素

まず以下のようなフォームがあるとします。

<form action="submit_url" method="post" id="loginform">
    <input type="text" id="username" name="username" />
    <input type="password" id="password" name="password" />
    <input type="submit" value="送信" />
</form>

今回は単純なログインフォームを作成しました。

この時、htmlだけでもある程度のチェックはできますがjavascriptでエラーの制御を行いたいですよね。

jQueryのコード

今回は一番単純にフォームに値が入力されているかどうかをチェックするだけのコードを用意しました。

※実際にはユーザー名やパスワードの要件を厳密に判定してください。

$(document).ready(function() {
    event.preventDefault(); // フォームの送信を防止
    $('#loginForm').submit(function(event) {
        // ユーザー名とパスワードの値を取得
        var username = $('#username').val().trim();
        var password = $('#password').val().trim();

        // ユーザー名とパスワードの両方が入力されているかチェック
        if (username === '' || password === '') {
            // 入力が不足している場合はアラートを表示
            alert('ユーザー名とパスワードを両方入力してください。');
        }
       //両方入力されている場合
        else {
            //フォームを送信(この後解説！！)
        }
    });
});

this.submit() vs $(this).submit()

ここで今回の本題ですが、15行目のフォームを送信する場合のコードはどちらが適切だと思いますか。

this.submit()

$(this).submit()

どちらも同じように見えますが、その挙動は大きく異なります。

結論から言うと

前者のthis.submit()を入れなければなりません。

もし$(this).submit()を入れてしまうと、もう一度submitイベントが呼び出され無限ループになってしまいます。

どう違うのか

this.submit()

まずthis.submit()は、JavaScriptのネイティブメソッドです。

thisは現在のフォーム要素を指し、submit()はそのフォームの送信を直接行います。

つまりこのメソッドが実行されると、jQueryのイベントハンドラをすべてスキップし、フォームが即座に送信されます。

これによって無限ループを回避できます。

$(this).submit()

一方で$(this).submit()はjQueryのメソッドです。$(this)でフォーム要素をjQueryオブジェクトに変換し、submit()を実行します。この方法では、jQueryによって設定された全てのsubmitイベントハンドラがトリガーされます。

つまりもう一度submitイベントが呼び出され、何度ループしてしまうのです。

まとめ

今回は単純なコードを取り上げて解説してみました。

非同期通信を行いつつエラーチェックをする際にもこの二つの違いについて悩む場面が出てきます。

使い分けをはっきりさせましょう。

ABOUT ME

たけし

元教育業界で講師を務め

未経験で転職を成功。

現在はWEBを中心に

SEとして活躍中

djangoやlaravelを主に扱う

保有資格:

・ AWS SAA(ソリューションアーキテクトアソシエイト)

・統計検定2級

・日商簿記2級