jQuery での二重フォーム送信を防ぐには?

jQuery でのフォームの再送信の防止

フォームの送信では、サーバー処理の遅延中にユーザーが誤って 2 回送信しないようにすることが重要です。一般的な解決策には、送信時にフォーム要素を無効にすることが含まれます。ただし、この方法では、重要なデータを含む入力など、無効にしてはいけない要素が無効になる可能性があります。

送信ボタンのみを無効にする

送信ボタンを具体的に無効にして干渉を回避するにはフォーム送信では、次のコードを使用します。

$('button[type=submit], input[type=submit]').prop('disabled',true);

二重送信防止用の jQuery プラグイン

もう 1 つの効果的な解決策は、データを利用する jQuery プラグインを作成することです( ) フォームを送信済みとしてマークする関数:

jQuery.fn.preventDoubleSubmission = function() {
    $(this).on('submit',function(e){
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

プラグインを使用するには、単にフォームに適用します:

$('form').preventDoubleSubmission();

Ajax フォームを除く

複数の送信を必要とする AJAX フォームがある場合は、クラスを追加し、次のセレクターを使用してそれらを除外します:

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

これらの手法を利用することで、フォームの二重送信を防ぎ、サーバーをスムーズに実行できます。処理中です。

以上がjQuery での二重フォーム送信を防ぐには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。