jquery xác nhận cần nhấp vào gửi hai lần để gửi biểu mẫu

Question

Tôi có biểu mẫu theo phương thức, người dùng phải hoàn tất biểu mẫu (nếu không xác thực sẽ hiển thị thông báo lỗi trường bắt buộc), sau đó nhấp vào loại gửi đầu vào. , sau đó họ nhấp vào nó một lần nữa, sau đó nó sẽ gửi qua ajax, và trả về một "cảm ơn" tin nhắn.

Tôi đã xem xét Stackoverflow và các câu trả lời được áp dụng cho vấn đề tôi đang gặp nhưng tôi vẫn không thể làm cho nó hoạt động. Tôi đã xóa event.preventDefault(); từ đó, cũng như $ ("# review-form") submit (function (event) {và form đệ trình như nó nên sau khi nhấp vào submit input một lần, nhưng nó không đăng lên cơ sở dữ liệu.

Dưới đây là jQuery cho # xét-form

$("#review-form").validate({ 
    submitHandler: function() { 
     $("#review-form").submit(function (event) { 
      var rating = $(this).find('input[name=rating]'); 
      // var rating = $(this).find('input[name=rating]').val(); 
      var review = $(this).find('textarea[name=review]'); 
      var form_settings = $(this).find('input[name=form_settings]'); 
      var xid = $(this).find('input[name=XID]'); 
      var entry_id = $(this).find('input[name=entry_id]'); 
      var entry_type = $(this).find('input[name=entry_type]'); 
      var site_id = $(this).find('input[name=site_id]'); 
      var first_name = $(this).find('input[name=first_name]'); 
      var middle_initial = $(this).find('input[name=middle_initial]'); 

      $.ajax({ 
       url: $("#review-form").attr("action"), //your server side script 
       data: $(this).serialize(), 
       type: 'POST', 
       success: function (data) { 
        //$('#response').append('<li>' + data + '</li>'); 
        $('#review-form').hide(); 
        $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
       }, 
       error: function (jxhr, msg, err) { 
        $('#response').append('<li style="color:red">' + msg + '</li>'); 
       } 
      }); 
      event.preventDefault(); 
     }); 
    } 
}); 

UPDATE:. tôi gỡ bỏ $ ("# xét-form") nộp (function (event) {}); và tôi đã thay đổi $ (this) .find ... và truy xuất bằng cách chỉ định id của biểu mẫu # form-review, sau đó qua thông số dữ liệu.Tôi đã nhận xét tất cả các biến riêng lẻ và chỉ cần chuyển $ (this) .serialize() vào tham số dữ liệu và không hoạt động.

bên dưới mã số hoạt động trong chrome và firefox, nhưng trong firefox, nó đóng modal và chuyển hướng đến trang chủ của tên miền, nó sẽ giữ cho phương thức cởi mở với một lời cảm ơn msg, giống như trong chrome:

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), //your server side script 
      data: $("#review-form").serialize(),     
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 

     event.preventDefault(); 
    } 
}); 

cuối cùng làm việc sản phẩm:

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), 
      data: $("#review-form").serialize(), 
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 
    } 
}); 

Answer 1

Bạn đang ràng buộc một handler submit sự kiện mới, trong submitHandler callback của các plugin. Trình xử lý này sẽ không kích hoạt ngay lập tức vì sự kiện gửi đã được tiến hành.

Bạn không cần nó. Các submitHandler callback sẽ đã preventDefault nội bộ bên trong mã Plugin

Remove này

$("#review-form").submit(function(event) { })

và giữ tất cả các mã nó chứa trực tiếp trong submitHandler

Vì bạn đang sử dụng serialize() cho dữ liệu ... bạn không cần tất cả các biến trường riêng lẻ mà bạn tạo hoặc là

Answer 2

Tôi có cùng một vấn đề và giải quyết nó bằng cách thêm những điều sau đây để xác nhận tôi:

$("#myform").validate({ 
    onfocusout: false 
}); 

onfocusout sẽ loại bỏ các tập trung từ lĩnh vực hình thức của bạn và gửi nút sẽ làm việc trên các nhấp chuột đầu tiên.

Xem thêm tại https://jqueryvalidation.org/validate/