jqueryでフォームの送信。this.submit() vs $(this).submit()
カテゴリ: IT
投稿日: 2023/11/13
#javascript#jQuery
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イベントが呼び出され、何度ループしてしまうのです。まとめ
今回は単純なコードを取り上げて解説してみました。
非同期通信を行いつつエラーチェックをする際にもこの二つの違いについて悩む場面が出てきます。使い分けをはっきりさせましょう。
プロフィール
たけし
カテゴリ
仕事
IT
ライフハック
勉強・
スキルアップ
スキルアップ
DIY
雑学
教育
書評
旅行
節約