ฉันมีรูปแบบที่ใช้เวลาสักครู่เพื่อให้เซิร์ฟเวอร์ดำเนินการ ฉันต้องแน่ใจว่าผู้ใช้รอและไม่พยายามส่งแบบฟอร์มอีกครั้งโดยคลิกที่ปุ่มอีกครั้ง ฉันพยายามใช้รหัส 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 ทุกอย่างจะถูกปิดใช้งาน แต่ไม่ได้ส่งแบบฟอร์มพร้อมกับข้อมูล POST ใด ๆ ที่ควรจะรวมไว้ด้วย ฉันไม่สามารถใช้ jQuery เพื่อส่งแบบฟอร์มได้เนื่องจากฉันต้องการปุ่มที่จะส่งพร้อมกับแบบฟอร์มเนื่องจากมีปุ่มส่งหลายปุ่มและฉันพิจารณาว่ามีการใช้ปุ่มใดซึ่งรวมอยู่ใน POST ฉันต้องการแบบฟอร์มที่จะส่งตามปกติและฉันต้องปิดการใช้งานทุกอย่างทันทีหลังจากนั้น

ขอบคุณ!

อัปเดตในปี 2018 : ฉันเพิ่งได้รับคะแนนสำหรับคำตอบเก่านี้และต้องการเพิ่มว่าทางออกที่ดีที่สุดคือการทำให้ idempotent ดำเนินการเพื่อให้การส่งซ้ำนั้นไม่เป็นอันตราย

เช่นถ้าแบบฟอร์มสร้างคำสั่งซื้อให้ใส่ ID ที่ไม่ซ้ำกันในแบบฟอร์ม ในครั้งแรกที่เซิร์ฟเวอร์เห็นคำขอสร้างคำสั่งซื้อด้วยรหัสนั้นควรสร้างและตอบสนอง "สำเร็จ" การส่งครั้งต่อไปควรตอบสนอง "ความสำเร็จ" (ในกรณีที่ลูกค้าไม่ได้รับคำตอบแรก) แต่ไม่ควรเปลี่ยนแปลงอะไร

ควรตรวจจับรายการที่ซ้ำกันผ่านการตรวจสอบที่ไม่ซ้ำกันในฐานข้อมูลเพื่อป้องกันสภาพการแข่งขัน

ฉันคิดว่าปัญหาของคุณคือบรรทัดนี้:

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

คุณกำลังปิดการใช้งานอินพุตทั้งหมดรวมถึงฉันเดาว่าคนที่มีข้อมูลในแบบฟอร์มควรจะส่ง

หากต้องการปิดการใช้งานเพียงปุ่มส่งคุณสามารถทำได้:

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

อย่างไรก็ตามฉันไม่คิดว่า IE จะส่งแบบฟอร์มหากปุ่มเหล่านั้นถูกปิดใช้งาน ฉันขอแนะนำวิธีการที่แตกต่าง

ปลั๊กอิน jQuery เพื่อแก้ปัญหา

เราเพิ่งแก้ไขปัญหานี้ด้วยรหัสต่อไปนี้ เคล็ดลับที่นี่ใช้ jQuery data()เพื่อทำเครื่องหมายแบบฟอร์มที่ส่งไปแล้วหรือไม่ ด้วยวิธีนี้เราไม่ต้องยุ่งกับปุ่มส่งซึ่งทำให้ IE หมดความกังวล

// 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 วิธีการจับเวลาเหมาะกับฉันเพียงเพราะเรากำลังพยายามหยุดการคลิกสองครั้งที่ปุ่มส่ง หากคุณมีเวลาตอบสนองนานเกินไปสำหรับการส่งฉันขอแนะนำให้แทนที่ปุ่มส่งหรือแบบฟอร์มด้วยสปินเนอร์

การบล็อกการส่งแบบฟอร์มที่ตามมาอย่างสมบูรณ์ตามตัวอย่างข้างต้นส่วนใหญ่มีผลข้างเคียงที่ไม่ดีอย่างหนึ่ง: หากมีความล้มเหลวของเครือข่ายและพวกเขาต้องการพยายามส่งอีกครั้งพวกเขาจะไม่สามารถทำได้และจะสูญเสียการเปลี่ยนแปลง ทำ สิ่งนี้จะทำให้ผู้ใช้โกรธแน่นอน

โปรดตรวจสอบปลั๊กอิน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>

มีความเป็นไปได้ในการปรับปรุงนาธานยาวคือวิธีการ คุณสามารถแทนที่ตรรกะในการตรวจจับแบบฟอร์มที่ส่งไปแล้วด้วยอันนี้:

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

รหัสของ Nathan แต่สำหรับปลั๊กอิน jQuery Validate

หากคุณใช้ปลั๊กอินตรวจสอบ 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 {-block เพื่อปิดใช้งานอินพุตและ / หรือปุ่มส่ง

ไชโย

ฉันลงเอยด้วยการใช้แนวคิดจากโพสต์นี้เพื่อหาวิธีแก้ปัญหาที่คล้ายคลึงกับเวอร์ชันของ 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เพื่อโพสต์แบบฟอร์มชุด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;
   }
});

วิธีการแก้ไขของนาธานแก้ไขเล็กน้อยสำหรับ Bootstrap 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);
};

ใช้ปุ่มส่งสองปุ่ม

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

ใช้เคาน์เตอร์ง่าย ๆ ในการส่ง

    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>

ฉันมีปัญหาที่คล้ายกันและวิธีแก้ไขปัญหาของฉันมีดังนี้

หากคุณไม่มีการตรวจสอบด้านไคลเอนต์คุณสามารถใช้ jquery one () วิธีการดังที่ระบุไว้ที่นี่

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

คุณสามารถหยุดการส่งที่สองโดยสิ่งนี้

$("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
    });
});

ทางออกของฉัน:

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

ในกรณีของฉันแบบฟอร์ม onsubmit มีรหัสตรวจสอบบางส่วนดังนั้นฉันจึงเพิ่มคำตอบNathan Longรวมถึงจุดตรวจสอบ 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();
    });

และจำปุ่มเปิดใช้งานใหม่เมื่อจำเป็น:

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

ฉันไม่อยากเชื่อเคล็ดลับ css แบบเก่า ๆ ที่ดีของตัวชี้เหตุการณ์: ยังไม่มีใครพูดถึง ฉันมีปัญหาเดียวกันโดยเพิ่มแอตทริบิวต์ที่ปิดใช้งาน แต่นี่ไม่ได้โพสต์กลับ ลองด้านล่างและแทนที่ #SubmitButton ด้วย ID ของปุ่มส่งของคุณ

$(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 Validate คุณสามารถใส่สองบรรทัดif ($('#myForm').valid())นี้ได้

รหัสนี้จะแสดงการโหลดบนป้ายชื่อปุ่มและปุ่มตั้งค่าเป็น

ปิดการใช้งานสถานะจากนั้นหลังจากการประมวลผลเปิดใช้งานอีกครั้งและกลับข้อความปุ่มเดิม **

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

ฉันแก้ไขปัญหาที่คล้ายกันมากโดยใช้:

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