Hình thức bẫy Jquery gửi()

Question

Tôi hiện đang sử dụng jquery để bẫy việc gửi biểu mẫu và hiển thị cho người dùng hộp thoại xác nhận. Nếu người dùng nhấp vào có, thì biểu mẫu sẽ gửi. Nếu người dùng nhấp không, sau đó đóng hộp thoại.

Tất cả đều hoạt động tốt nhưng đối với một vấn đề: khi người dùng nhấp vào có, điều này sau đó kích hoạt lại mã đó và hộp thoại được mở lại.

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Tôi hiểu tại sao điều này xảy ra, chỉ cần không chắc chắn về cách tốt nhất để vượt qua nó. Tôi nhận ra rằng tôi có thể hiển thị các phương thức trên nút bấm, thay vì gửi mẫu, nhưng điều này không nhận được xung quanh vấn đề của người dùng nhấn nút enter trên bàn phím để gửi biểu mẫu.

Answer 1

Bởi vì khi bạn submit hình thức, sự kiện submit gây nên một lần nữa và do đó xử lý sự kiện. Bạn cần phải unbind số submit trình xử lý sự kiện khi người dùng nói OK. Hãy thử điều này

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        //Check this line - unbinding the submit event handler 
        $("#myform").unbind('submit').submit(); 
        return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Answer 2

Bạn nên trả về false khi OK:

$("#myform").submit(function (event) { 
    if (something) { 
     var $dialog = $('<div></div>').dialog({ 
      buttons: { 
       "OK": function() { 
        $dialog.dialog('close'); 
        $("#myform").submit(); 
        return false; // <=== not just return; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
     event.preventDefault(); 
     return false; 
    } else { 
     $("#myform").submit(); 
    } 
}); 

Hoặc xóa hướng dẫn nộp:

buttons: { 
"OK": function() { 
    $dialog.dialog('close'); 
    //$("#myform").submit(); <-- delete it 
    return; 
}, 

Answer 3

tôi sẽ làm something hoặc là một namespaced toàn cầu, hay một giá trị từ một số đầu vào ẩn như vậy:

var something = nameSpaced.something || $('#hiddenInput').val(); //your choice 
if (something) { 
    ... 
} ... 

Logic của bạn nên làm việc bình thường sau đó.

Answer 4

Intstead sử dụng đối tượng jQuery để gửi biểu mẫu, bạn có thể sử dụng phần tử DOM mà đối tượng jQuery đề cập đến để gửi biểu mẫu. Điều này bỏ qua trình xử lý sự kiện jQuery. Hàm OK của bạn sẽ trông giống như sau:

"OK": function() { 
    $dialog.dialog('close'); 
    $("#myform").get(0).submit(); // use the underlying DOM element to sumbit 
    return false; 
},