Làm cách nào để ngăn biểu mẫu gửi nhiều lần từ phía khách hàng?

Đôi khi khi phản hồi chậm, người ta có thể nhấp vào nút gửi nhiều lần.

Làm thế nào để ngăn chặn điều này xảy ra?

Sử dụng javascript không phô trương để vô hiệu hóa sự kiện gửi trên biểu mẫu sau khi nó đã được gửi. Đây là một ví dụ sử dụng jQuery.

CHỈNH SỬA: Đã khắc phục sự cố gửi biểu mẫu mà không nhấp vào nút gửi. Cảm ơn, ichiban.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Tôi đã thử giải pháp của vanstee cùng với xác thực không phô trương asp mvc 3 và nếu xác thực ứng dụng không thành công, mã vẫn chạy và gửi biểu mẫu bị vô hiệu hóa. Tôi không thể gửi lại sau khi sửa các trường. (xem bình luận của bjan)

Vì vậy, tôi đã sửa đổi tập lệnh của vanstee như thế này:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Việc kiểm soát gửi biểu mẫu phía máy khách có thể đạt được khá thanh lịch bằng cách để trình xử lý gửi kèm ẩn nút gửi và thay thế nó bằng một hoạt ảnh đang tải. Bằng cách đó, người dùng nhận được phản hồi trực quan ngay lập tức ở cùng một vị trí mà hành động của họ (nhấp chuột) đã xảy ra. Đồng thời, bạn ngăn không cho biểu mẫu được gửi vào lần khác.

Nếu bạn gửi biểu mẫu qua XHR, hãy nhớ rằng bạn cũng phải xử lý các lỗi gửi, ví dụ như thời gian chờ. Bạn sẽ phải hiển thị lại nút gửi vì người dùng cần gửi lại biểu mẫu.

Một lưu ý khác, llimllib đưa ra một điểm rất hợp lệ. Tất cả xác nhận biểu mẫu phải xảy ra phía máy chủ. Điều này bao gồm nhiều lần kiểm tra gửi. Đừng bao giờ tin tưởng khách hàng! Đây không chỉ là trường hợp nếu javascript bị tắt. Bạn phải ghi nhớ rằng tất cả mã phía máy khách đều có thể được sửa đổi. Hơi khó tưởng tượng nhưng html / javascript nói chuyện với máy chủ của bạn không nhất thiết phải là html / javascript bạn đã viết.

Như llimllib gợi ý, hãy tạo biểu mẫu với một số nhận dạng duy nhất cho biểu mẫu đó và đặt nó vào trường nhập ẩn. Lưu trữ mã định danh đó. Khi nhận dữ liệu biểu mẫu, chỉ xử lý nó khi số nhận dạng khớp. (Cũng liên kết số nhận dạng với phiên người dùng và đối sánh với phiên đó để tăng cường bảo mật.) Sau khi xử lý dữ liệu, hãy xóa số nhận dạng.

Tất nhiên, thỉnh thoảng, bạn cần phải xóa các mã định danh mà không bao giờ có bất kỳ dữ liệu biểu mẫu nào được gửi. Nhưng hầu hết có lẽ trang web của bạn đã sử dụng một số loại cơ chế "thu gom rác".

<form onsubmit="if(submitted) return false; submitted = true; return true">

Đây là cách đơn giản để làm điều đó:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Tắt nút gửi ngay sau một cú nhấp chuột. Đảm bảo rằng bạn xử lý xác thực đúng cách. Đồng thời giữ một trang trung gian cho tất cả các hoạt động xử lý hoặc DB và sau đó chuyển hướng đến trang tiếp theo. Nó đảm bảo rằng Làm mới trang thứ hai không thực hiện một quá trình xử lý nào khác.

Băm thời gian hiện tại, biến nó thành đầu vào ẩn trên biểu mẫu. Ở phía máy chủ, hãy kiểm tra hàm băm của mỗi lần gửi biểu mẫu; nếu bạn đã nhận được mã băm đó thì bạn sẽ phải gửi lại.

chỉnh sửa: dựa vào javascript không phải là một ý tưởng hay, vì vậy tất cả các bạn có thể tiếp tục ủng hộ những ý tưởng đó nhưng một số người dùng sẽ không bật nó. Câu trả lời đúng là không tin tưởng đầu vào của người dùng ở phía máy chủ.

Bạn cũng có thể hiển thị một thanh tiến trình hoặc một con quay để cho biết rằng biểu mẫu đang được xử lý.

Sử dụng JQuery bạn có thể làm:

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Tôi biết bạn đã gắn thẻ câu hỏi của mình bằng 'javascript' nhưng đây là một giải pháp hoàn toàn không phụ thuộc vào javascript:

Đó là một mẫu ứng dụng web có tên PRG và đây là một bài viết hay mô tả nó

Bạn có thể ngăn nhiều lần gửi đơn giản bằng:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Câu trả lời đơn giản nhất cho câu hỏi này như được hỏi: "Đôi khi khi phản hồi chậm, người ta có thể nhấp vào nút gửi nhiều lần. Làm thế nào để ngăn điều này xảy ra?"

Chỉ cần vô hiệu hóa nút gửi biểu mẫu, như mã bên dưới.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Nó sẽ vô hiệu hóa nút gửi, trong lần nhấp đầu tiên để gửi. Ngoài ra, nếu bạn có một số quy tắc xác thực, thì nó sẽ hoạt động tốt. Hy vọng nó sẽ giúp ích.

Về phía khách hàng , bạn nên tắt nút gửi khi biểu mẫu được gửi bằng mã javascript giống như phương pháp được cung cấp bởi @vanstee và @chaos.

Nhưng có một vấn đề đối với độ trễ mạng hoặc tình huống bị vô hiệu hóa javascript mà bạn không nên dựa vào JS để ngăn điều này xảy ra.

Vì vậy, ở phía máy chủ , bạn nên kiểm tra lần gửi lặp lại từ các máy khách giống nhau và bỏ qua lần gửi lặp lại có vẻ là một nỗ lực sai từ người dùng.

Bạn có thể thử plugin safeform jquery.

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

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

Giải pháp đơn giản và thanh lịch nhất cho tôi:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Liên kết để biết thêm ...

Sử dụng mã này trong biểu mẫu của bạn. Nó sẽ xử lý nhiều lần nhấp.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

nó sẽ hoạt động chắc chắn.

Điều này cho phép gửi 2 giây một lần. Trong trường hợp xác nhận trước.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

cách tốt nhất để ngăn nhiều người gửi là điều này chỉ cần chuyển id nút trong phương thức.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Để làm điều này bằng cách sử dụng javascript hơi dễ dàng. Sau đây là mã sẽ cung cấp chức năng mong muốn:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Hầu hết các giải pháp đơn giản là vô hiệu hóa nút khi nhấp, bật nó sau khi hoạt động hoàn tất. Để kiểm tra giải pháp tương tự trên jsfiddle:

[click here][1]

Và bạn có thể tìm thấy một số giải pháp khác trên câu trả lời này .

Điều này làm việc rất tốt cho tôi. Nó gửi trang trại và làm cho nút vô hiệu hóa và sau 2 giây kích hoạt nút.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

Trong ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Chỉ để thêm vào các câu trả lời có thể mà không bỏ qua xác thực đầu vào của trình duyệt

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Một thay thế cho những gì đã được đề xuất trước đó là:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});