複数投稿の形式は、jQuery

https://stackoverflow.com/questions/2830542

26-09-2019
|

質問

い形でサーバのプラグインの実行部になります。いことを確実にする必要があり、ユーザー待ちしようとはしていませんが再提出の形をクリックするとボタン"を押してください。※を使ってみました以下のjQueryコード:

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

またこのFirefoxで絞り障害者が書が未提出の任意のデータとなっていました。利用できない場合は、jQueryフォームの送信がさんありがとうございます。ボタンの情報を取得できる形式が複数存在しているように、提出ボタンを決定するのに使用したいくつかの定理についての価値に含まれます。さんありがとうございます。形として提出されことが必要でを無効にするか、その直後のことなどが挙げられる。

よろしく！

解決

更新2018年:しかもポイントはこの答えは、<url> <url> <url> <url> <url> <url> <url> <url> <url> <url>を追加すること ベスト 液うに運べる重複応募は無害な.

例えば、場合には形状を作成し、入れてユニークなIDの形式です。初めてのサーバーを見て注文の作成要求とそのidで作成する対応"成功".その後の投稿にも対応"成功"の場合、顧客な最初の応答がないの変化もなかった。

重複を検出したらより一意性のチェックをデータベースの防止レースの条件です。

と思いる問題は、このライン:

$('input').attr('disabled','disabled');

い無効にすべての入力を含む、いらっしゃるかと思いもよく知られているデータの形で提出してください。

を無効にするだけで、送信ボタン(s)、えい:

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

しかし、ならないと思いIEのまま提出の場合でもボタンは無効になります。思いる別のアプローチをしているのだ。

は、jQueryのプラグインの問題を解決し

まだこの問題を解決し、以下のコードです。のことながら、こちらの腕の見せ所jQueryを使うの data() マークの形にして提出します。そのために利用しました。堂とし、提出ボタン、フリークの家。

// jQuery plugin to prevent double submission of forms
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るすべを許可するを提出し、複数回のページあたりの負荷ができてクラスを示すことを、排除してからセレクタのようになります:

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

他のヒント

タイミングアプローチが間違っている？ - どのようにあなたが知っているアクションは、クライアントのブラウザにかかる時間

どのようにそれを行うには

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

フォームが送信されると、それはすべての内部送信ボタンを無効にします。

あなたが戻って歴史の中で行くとき、この状態が記憶されますボタンを無効にすると、

Firefoxで、覚えておいてください。たとえば、あなたは、ページの読み込み上のボタンを有効にする必要があることを防止します。

私はネイサンロングの答えが進むべき道だと思います。私は、フォームが有効であるという条件を追加したので、私にとっては、私は、クライアント側の検証を使用しています。

編集：。これが追加されていない場合は、クライアント側の検証エラーが発生した場合、ユーザーがフォームを送信することはできません。

        // jQuery plugin to prevent double submission of forms
        jQuery.fn.preventDoubleSubmission = function () {
            $(this).on('submit', function (e) {
                var $form = $(this);

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

            // Keep chainability
            return this;
        };

event.timeStampはFirefoxで動作しません。偽を返すこと、あなたがevent.preventDefault()を呼び出す必要があり、非標準です。そして、我々はそれでいる間、 の常にの対照構築するで括弧を使用しています。

前の回答のすべてを要約すると、ここで仕事をしていませんし、クロスブラウザを動作するプラグインです。

jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    jQuery(this).bind('submit', function(event) {

        if(last_clicked) {
            time_since_clicked = jQuery.now() - last_clicked;
        }

        last_clicked = jQuery.now();

        if(time_since_clicked < 2000) {
            // Blocking form submit because it was too soon after the last submit.
            event.preventDefault();
        }

        return true;
    });
};

我々は送信ボタンのダブルクリックを停止しようとしているので、アドレスKern3lに、タイミング方法は、単に私のために動作します。あなたが提出に非常に長い応答時間があれば、私はスピンナーでボタンやフォームを送信交換をお勧めします。

上記の例のほとんどがそうであるように完全に、フォームのその後の提出を阻止する、1悪い副作用があります。そこにネットワーク障害があると、彼らは再送信しようとする場合、彼らはそうすることができないであろうと失うことになります彼らは行った変更。これは間違いなく怒っているユーザーになるだろう。

、 jqueryの-safeform のプラグインをチェックしてみてください。

使用例：

$('.safeform').safeform({
    timeout: 5000,  // disable next submission for 5 sec
    submit: function() {
        // You can put validation and ajax stuff here...

        // When done no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
});

...しかし、フォームをして提出されていません POSTデータのいずれかのそれがになっています含まれます。

正しいです。無効フォーム要素の名前/値がサーバーに送信されることはありません。あなたは、それらを設定する必要があります。の読み取り専用の要素ます。

また、アンカーはそのように無効にすることはできません。あなたは自分のhrefを削除する（推奨されません）またはそのデフォルトの動作（より良い方法を）防ぐため、例えばどちらかにする必要があります：ます。

<script type="text/javascript">
$(document).ready(function(){
    $("form#my_form").submit(function(){
      $('input').attr('readonly', true);
      $('input[type=submit]').attr("disabled", "disabled");
      $('a').unbind("click").click(function(e) {
          e.preventDefault();
          // or return false;
      });
    });
</script>

/ <ネイサン・ロングのアプローチを改善する可能性がありますA>。あなたはこの1つで既に送信されたフォームを検出するためのロジックを置き換えることができます：

var lastTime = $(this).data("lastSubmitTime");
if (lastTime && typeof lastTime === "object") {
    var now = new Date();
    if ((now - lastTime) > 2000) // 2000ms
        return true;
    else
        return false;
}
$(this).data("lastSubmitTime", new Date());
return true; // or do an ajax call or smth else

ネイサンのコードが、のためのjQueryの検証プラグイン

あなたはjQueryの検証プラグインを使用するために起こる場合は、

、彼らはすでにハンドラ実装を提出しており、その場合には、複数を実装する理由はありません。コード：

jQuery.validator.setDefaults({
  submitHandler: function(form){
    // Prevent double submit
    if($(form).data('submitted')===true){
      // Previously submitted - don't submit again
      return false;
    } else {
      // Mark form as 'submitted' so that the next submit can be ignored
      $(form).data('submitted', true);
      return true;
    }
  }
});

あなたが簡単に無効入力に} else {ブロック以内にそれを拡張し、および/またはボタンを提出することができます。

乾杯

私はAtZakoのバージョンにかなり似ている解決策を考え出すために、このポストからのアイデアを使用して終了します。

 jQuery.fn.preventDoubleSubmission = function() {

    var last_clicked, time_since_clicked;

    $(this).bind('submit', function(event){

    if(last_clicked) 
      time_since_clicked = event.timeStamp - last_clicked;

    last_clicked = event.timeStamp;

    if(time_since_clicked < 2000)
      return false;

    return true;
  });   
};

このように使用します：

$('#my-form').preventDoubleSubmission();

私は解決策は、タイムアウトのいくつかの種類が含まれていなかったことが、ロックアウトがトリガされると、ページを更新するまで、あなたが再び提出することができないので、単に無効に提出または無効にフォーム要素が問題を引き起こしたことがわかりました。 AJAXのものをやったときにそれは私のためにいくつかの問題が発生します。

これはおそらく、そのないという空想としてビットをアップprettiedすることができます。

フォームを投稿するの AJAX を使用している場合は、

、セットasync: falseは、フォームをクリアする前に、追加の提出を防ぐ必要があります：

$("#form").submit(function(){
    var one = $("#one").val();
    var two = $("#two").val();
    $.ajax({
      type: "POST",
      async: false,  // <------ Will complete submit before allowing further action
      url: "process.php",
      data: "one="+one+"&two="+two+"&add=true",
      success: function(result){
        console.log(result);
        // do something with result
      },
      error: function(){alert('Error!')}
    });
    return false;
   }
});

ブートストラップ3.これのために少しは送信ボタンへの負荷のテキストを設定しますネイサンのソリューションを修正しました。それに加えて、30秒後にタイムアウトし、フォームを再提出することができるようになります。

jQuery.fn.preventDoubleSubmission = function() {
  $('input[type="submit"]').data('loading-text', 'Loading...');

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

    $('input[type="submit"]', $form).button('loading');

    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);
      $form.setFormTimeout();
    }
  });

  // Keep chainability
  return this;
};

jQuery.fn.setFormTimeout = function() {
  var $form = $(this);
  setTimeout(function() {
    $('input[type="submit"]', $form).button('reset');
    alert('Form failed to submit within 30 seconds');
  }, 30000);
};

2本使用には、ボタンを提出します。

<input id="sub" name="sub" type="submit" value="OK, Save">
<input id="sub2" name="sub2" type="submit" value="Hidden Submit" style="display:none">

とjQueryます：

$("#sub").click(function(){
  $(this).val("Please wait..");
  $(this).attr("disabled","disabled");
  $("#sub2").click();
});

私は同様の問題と私の解決策（複数可）を持ってきたとして、次のされています。

あなたが任意のクライアント側の検証を持っていない場合は、ここで文書化されているようにます。

その後、あなたは、単にjQueryの1（）メソッドを使用することができます

http://api.jquery.com/one/する

そのが呼び出された後、このハンドラを無効にします。

$("#mysavebuttonid").on("click", function () {
  $('form').submit();
});

私はその少しトリッキーその後、やっていたとして、あなたは、クライアント側の検証をやっている場合。上記の例では、失敗した検証した後、再度提出することはできないだろう。代わりに、このアプローチを試してみてください。

$("#mysavebuttonid").on("click", function (event) {
  $('form').submit();
  if (boolFormPassedClientSideValidation) {
        //form has passed client side validation and is going to be saved
        //now disable this button from future presses
        $(this).off(event);
   }
});

ここで私はそれを行う方法です。

$(document).ready(function () {
  $('.class_name').click(function () {
    $(this).parent().append('<img src="data:image/gif;base64,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" />');
    $(this).hide();
  });
});

クレジット： https://github.com/phpawy/jquery-submit-once

提出の

を使用するシンプルなカウンタます。

    var submitCounter = 0;
    function monitor() {
        submitCounter++;
        if (submitCounter < 2) {
            console.log('Submitted. Attempt: ' + submitCounter);
            return true;
        }
        console.log('Not Submitted. Attempt: ' + submitCounter);
        return false;
    }

フォームを送信します。

の

とコールmonitor()機能

    <form action="/someAction.go" onsubmit="return monitor();" method="POST">
        ....
        <input type="submit" value="Save Data">
    </form>

このボタンのラベルの負荷を表示するコード、及びセットボタンを

ディスエーブル状態は、処理した後、再度有効にして、オリジナルのボタンのテキストをバック返す**

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
}

）

私の解決策ます：

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

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

    // Keep chainability
    return this;
};

I増分ネイサン・ロングの答えはonSubmit検証チェックポイントを含むように、

私の場合は、フォームのをonSubmitは、いくつかの検証コードを持っていました

$.fn.preventDoubleSubmission = function() {
      $(this).on('submit',function(e){
        var $form = $(this);
        //if the form has something in onsubmit
        var submitCode = $form.attr('onsubmit');
        if(submitCode != undefined && submitCode != ''){
            var submitFunction = new Function (submitCode);
            if(!submitFunction()){
                event.preventDefault();
                return false;
            }                   
        }

        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;
    };

変更ボタンを提出ます：

<input id="submitButtonId" type="submit" value="Delete" />

通常のボタン付きます：

<input id="submitButtonId" type="button" value="Delete" />

次にクリック機能を使用します：

$("#submitButtonId").click(function () {
        $('#submitButtonId').prop('disabled', true);
        $('#myForm').submit();
    });

そしてnecesaryあるときに再有効化]ボタンを覚えています：

$('#submitButtonId').prop('disabled', false);

私は、ポインタイベントの良い昔ながらのCSSのトリックを信じることができない：どれもまだ言及していないされていません。私はdisabled属性を追加することで、同じ問題を持っていたが、これはポストバックしません。下に試してみて、あなたの送信ボタンのIDと#SubmitButtonを置き換えます。

$(document).on('click', '#SubmitButton', function () {
    $(this).css('pointer-events', 'none');
})

なぜ、これだけではない - これは、フォームを送信しますが、また無効に提出ボタン、

   $('#myForm').on('submit', function(e) {
       var clickedSubmit = $(this).find('input[type=submit]:focus');
       $(clickedSubmit).prop('disabled', true);
   });

あなたはjQueryの検証を使用している場合も、あなたはif ($('#myForm').valid())の下に次の2行を置くことができます。

あなたは二本

により提出停止することができます

$("form").submit(function() {
        // submit more than once return false
        $(this).submit(function() {
            return false;
        });
        // submit once return true
        return true; // or do what you want to do
    });
});

私が使用して非常に同様の問題を解決します：

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow