Hộp thoại jQuery phương thức không gửi biểu mẫu của tôi

Question

Tôi đang sử dụng hộp thoại jQuery Modal Dialog để hỏi người dùng có muốn gửi biểu mẫu hay không.

Tuy nhiên sau khi người dùng nhấp vào nút Gửi của hộp thoại, biểu mẫu không gửi.

Nếu sau đó tôi nhấp lại vào nút gửi biểu mẫu, nó sẽ gửi.

Tôi đoán đây là vấn đề về phạm vi, tôi đã thấy một số bài đăng khác về vấn đề này nhưng chưa có nhiều giờ mà không có may mắn. Bất kỳ ý tưởng về cách giải quyết này?

Javascript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
}); 

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="submit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div> 

Answer 1

Thay đổi tên thuộc tính của nút gửi của bạn từ 'submit' để 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" /> 

Thay thế '#' trong biểu mẫu thuộc tính action thành trống hoặc bất kỳ url hợp lệ nào khác.

Answer 2

Giải pháp đơn giản là ... tên nút của bạn. Lý do tại sao bạn hỏi? Tôi sẽ cho bạn thấy!

Hãy thực hiện điều này jsfiddle và thông báo rằng tôi chỉ thực hiện một vài thay đổi. Javascript đã không thay đổi, chỉ là HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

Tôi đã thực hiện hai thay đổi:

1. Tôi đã thay đổi hành động để có một cuộc gọi javascript để tương thích jsfiddle
2. Tôi đã đổi tên nút của bạn thành một tên khác ngoài gửi

Tôi đã phải làm # 2 bởi vì gọi $ ('# myform') .đã được tham chiếu nút, không phải là phương pháp gửi, và jQuery có tất cả các loại lẫn lộn. Bằng cách đổi tên nút của bạn, $ ('# myform'). Submit vẫn là chức năng gửi jQuery mong đợi và mọi người đều hạnh phúc.

Tôi tình cờ hiểu được điều này thông qua một số lần lặp lại mà tôi đã lưu dưới đây cho hậu thế.

Chúc may mắn!

POST ORIGINAL ======= DƯỚI ========

Nếu tất cả các bạn muốn làm là "giải quyết việc này", bạn có thể cấu trúc như sau:

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

Javascript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() { 
     $("#confirm").dialog('open'); 
    }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } 
    }); 
});​ 

Nhưng kỳ lạ, dưới đây làm việc một s cũng:

HTML

<form id="myform" action="javascript:alert('success!');" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

Javascript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       $('#myform').submit(); 
       //submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
});​ 

Điều duy nhất tôi đã thay đổi ở đây đã được gỡ bỏ nút gửi và 100% nộp qua jQuery.

Answer 3

Bạn có thể dùng thử on submit event biểu mẫu có loại sự kiện khác nhau.

onsubmit="return confirm('Please confirm that you want to submit')" 

xem này EDIT, bây giờ bạn có thể thay đổi tạo một hàm với Hộp thoại phương thức trả về đúng hoặc sai.