28

フォームの二重送信を防ぐ「正しい」方法を見つけようとしています。SOには関連する投稿がたくさんありますが、どれも私には当てはまりません。以下2問。

これが私のフォームです

<form method="POST">
    <input type="text" name="q"/>
    <button class="once-only">Send</button>
</form>

二重送信を無効にする最初の試みは次のとおりです。

$(document).ready(function(){
    $(".once-only").click(function(){
        this.disabled = true;
        return true;
    });
});

これは、ここで提案されているアプローチです: Disable button after post using JS/Jquery。その投稿は、送信要素がボタンではなく入力でなければならないことを示唆していますが、両方をテストしても違いはありません。このフィドルを使用して自分で試すことができます: http://jsfiddle.net/uT3hP/

ご覧のとおり、これによりボタンが無効になりますが、フォームの送信も妨げられます。サブミット要素がボタンと入力要素の場合。

質問 1:このクリック ハンドラーがフォームの送信を停止するのはなぜですか?

さらに検索すると、この解決策が見つかります（ダブルクリックを防ぐために送信ボタンを無効にすると、フォームが投稿されないのはなぜですか? から）

if($.data(this, 'clicked')){
    return false;
} else{
    $.data(this, 'clicked', true);
    return true;
}

このフィドルを使用してこれで遊ぶことができます: http://jsfiddle.net/uT3hP/1/

これは機能しますが...

質問 2: これが私たちにできる最善のことですか?

これは初歩的なことだと思いました。アプローチ1は機能しませんが、アプローチ2は機能しますが、私はそれが好きではなく、もっと簡単な方法が必要だと感じています.

4

5 に答える 5

37

jQueryのsubmit（）を使用できます。この場合、次のようになります。

$('form').submit(function(){
    $(this).children('input[type=submit]').prop('disabled', true);
});

これが動作中のjsFiddle（Mike製）です-http: //jsfiddle.net/gKFLG/1/。

送信ボタンがform-elementの直接の子でない場合は、に置き換える必要がありchildrenますfind。さらに、送信ボタンがbutton要素ではなく要素である場合もありinputます。例：これは、 Bootstrap水平フォームを使用している場合です。以下は、スニペットの別のバージョンです。

$('form').submit(function(){
    $(this).find('button[type=submit]').prop('disabled', true);
});

デモjsFiddle- http: //jsfiddle.net/devillers/fr7gmbcy/

于 2013-03-20T16:55:29.980 に答える
2

次のコードを使用してみてください。

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});
于 2013-03-20T16:56:46.043 に答える
2

これは役立つはずです：

<form class="form-once-only" method="POST">
    <input type="text" name="q"/>
    <button type="submit" class="once-only">Send</button>
</form>

Javascript:

$(document).ready(function(){
    $("form.form-once-only").submit(function () {
        $(this).find(':button').prop('disabled', true);
    });
}
于 2013-03-20T17:03:27.480 に答える