Làm cách nào để ngăn chặn việc gửi đôi với jQuery hoặc Javascript?

Question

Tôi tiếp tục nhận các mục nhập trùng lặp trong cơ sở dữ liệu của mình vì người dùng thiếu kiên nhẫn nhấp vào nút gửi nhiều lần.

Tôi googled và googled và tìm thấy một vài kịch bản, nhưng không ai trong số họ có vẻ là đủ.

Làm cách nào để ngăn các mục nhập trùng lặp này xảy ra bằng javascript hoặc tốt hơn jQuery?

Thanx trước!

Answer 1

Làm cách nào để tắt nút khi gửi? Đó là những gì tôi làm. Nó hoạt động tốt.

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

Disclaimer:
này chỉ hoạt động khi được kích hoạt javascript trên trình duyệt của người dùng. Nếu dữ liệu được gửi là rất quan trọng (như mua thẻ tín dụng), thì hãy xem xét giải pháp của tôi là chỉ là dòng phòng thủ đầu tiên. Tuy nhiên, đối với nhiều trường hợp sử dụng, việc vô hiệu hóa nút gửi sẽ cung cấp đủ khả năng phòng ngừa.

Tôi sẽ triển khai giải pháp chỉ javascript này trước tiên. Sau đó theo dõi số lượng bản ghi trùng lặp vẫn đang được tạo. Nếu đó là số không (hoặc đủ thấp để không quan tâm), thì bạn đã hoàn tất. Nếu nó quá cao đối với bạn, thì hãy thực hiện kiểm tra cơ sở dữ liệu phía sau cho một bản ghi hiện có.

Answer 2

này nên làm như lừa:

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

Không JQuery?

Hoặc, bạn có thể thực hiện kiểm tra từ db để kiểm tra xem bản ghi đã tồn tại chưa và nếu có, không chèn bản ghi mới.

Answer 3

Đây là một chút jQuery mà tôi sử dụng để tránh vấn đề nhấp đúp. Nó sẽ chỉ cho phép một cú nhấp chuột vào nút gửi.

$(document).ready(function() { 
    $("#submit").one('click', function() { 
    }); 
}); 

Answer 4

Ngăn việc đăng hai lần không đơn giản như việc vô hiệu nút gửi. Có những yếu tố khác có thể gửi thông tin:

• yếu tố nút
• yếu tố img
• javascripts
• nhấn 'nhập' trong khi trên một số lĩnh vực văn bản

Sử dụng jQuery chứa dữ liệu sẽ được lựa chọn của tôi. Dưới đây là một ví dụ:

$('#someForm').submit(function(){ 
    $this = $(this); 

    /** prevent double posting */ 
    if ($this.data().isSubmitted) { 
     return false; 
    } 

    /** do some processing */ 

    /** mark the form as processed, so we will not process it again */ 
    $this.data().isSubmitted = true; 

    return true; 
}); 

Answer 5

Một kỹ thuật tôi đã nhìn thấy sử dụng là gán một ID duy nhất cho mỗi hình thức đó là mở ra, và chỉ chấp nhận một trình theo mẫu dựa trên ID. Điều này cũng có nghĩa là bạn có thể kiểm tra xem có bao nhiêu lần mọi người không phiền lòng gửi và bạn có thể kiểm tra xem liệu nội dung gửi có thực sự đến từ biểu mẫu của bạn hay không bằng cách kiểm tra xem nó có ID mà máy chủ của bạn đã tạo hay không.

Tôi biết bạn đã yêu cầu giải pháp javascript, nhưng cá nhân tôi sẽ làm cả hai nếu tôi cần sự vững mạnh.

Answer 6

Vấn đề với phương pháp được mô tả here là nếu bạn đang sử dụng khung xác thực javascript và xác thực không thành công, bạn sẽ không thể sửa và gửi lại biểu mẫu mà không làm mới trang.

Để giải quyết vấn đề này, bạn cần phải cắm vào sự kiện thành công của khung xác thực của mình và chỉ khi đó, hãy đặt điều khiển gửi thành tắt. Với Parsley, bạn có thể cắm vào sự kiện dưới hình thức xác nhận với đoạn mã sau:

$.listen('parsley:form:validated', function(e){ 
    if (e.validationResult) { 
     /* Validation has passed, prevent double form submissions */ 
     $('button[type=submit]').attr('disabled', 'disabled'); 
    } 
}); 

Answer 7

Nếu bạn đang sử dụng xác nhận client-side và muốn cho phép thêm nộp nỗ lực nếu dữ liệu không hợp lệ, bạn có thể không cho phép lần gửi chỉ khi nội dung của biểu mẫu không thay đổi:

var submittedFormContent = null; 
$('#myForm').submit(function (e) { 
    var newFormContent = $(this).serialize(); 
    if (submittedFormContent === newFormContent) 
     e.preventDefault(true); 
    else 
     submittedFormContent = newFormContent; 
}); 

Answer 8

Tôi không chắc chắn ngôn ngữ/khung bạn đang làm việc hoặc nếu nó chỉ là HTML thẳng. Nhưng trong một ứng dụng Rails tôi đã viết tôi vượt qua một thuộc tính dữ liệu trên nút biểu mẫu disable_with giúp nút không thể nhấp nhiều lần trong khi giao dịch đang diễn ra.

Đây là hình thức của ERB.

<%= f.button "Log In", class: 'btn btn-large btn-block btn-primary', data: {disable_with: "<i class='icon-spinner'></i>Logging In..."} %> 

Answer 9

Đây là những gì tôi đã đưa ra trong https://github.com/liberapay/liberapay.com/pull/875:

$('form').on('submit', function (e) { 
    var $form = $(this); 
    // Check that the form hasn't already been submitted 
    if ($form.data('js-submit-disable')) { 
     e.preventDefault(); 
     return false; 
    } 
    // Prevent submitting again 
    $form.data('js-submit-disable', true); 
    // Set a timer to disable inputs for visual feedback 
    var $inputs = $form.find(':not(:disabled)'); 
    setTimeout(function() { $inputs.prop('disabled', true); }, 100); 
    // Unlock if the user comes back to the page 
    $(window).on('focus pageshow', function() { 
     $form.data('js-submit-disable', false); 
     $inputs.prop('disabled', false); 
    }); 
});