Question

我的表单中有许多复选框。用户将检查一个或多个复选框，然后单击“删除”按钮，这是实际提交按钮，然后将删除所选复选框的相应记录。

所需的操作步骤如下： -

当用户选择一个或多个复选框并单击提交按钮时，将执行JQUERY代码，其中

如果选中任何复选框，则应检查;如果不;然后显示警告信息，不提交表格。
如果发现选中了一个或多个复选框，则应使用确认提示框询问用户是否确认删除。
如果用户按确认框上的YES按钮，则应使用javascript submit语句提交表单。
如果用户按下“否”按钮，则应取消选中已选中的复选框，并且不应提交表单。

这是我写过的JQUERY代码。

$(document).ready(function () {
    $("#id_delete").click(function() {
        var temp = $("#id_frm input:checkbox:checked");
        var len = temp.length;

        if(len==0) {
            alert("Please select the order.");
        } else {
            if (confirm("Are you sure to delete the selected orders.")) {
                $("#id_frm").submit();
            } else {
                temp.checked=false;
            }
        }
    });     
});

问题：

此代码无法正常运行。这里 1.如果没有选中复选框，则提交表单。 2.当用户在确认对话框上按NO按钮时，它会提交表格。

我想只在按钮点击事件上编写此代码。

请指导我这个问题的朋友。

Answer 1

以下是：

$("#id_frm").submit(function(ev){
ev.preventDefault();
});

Answer 2

这是一般模式。

$('form').submit(function () { 
    // return true to submit, return false to stop submit 
});

http://api.jquery.com/submit/

Answer 3

$(document).ready(function() {
    $('form#id_frm').submit(function() {
        var temp=$("#id_frm input:checkbox:checked");
        var len=temp.length;
        if(len==0) {
            alert("Please select the order.");
        } else {
            if(confirm("Are you sure to delete the selected orders.")) {
                return true;
            } else {
                temp.checked=false;
                return false;
            }
        }
    });
});

Answer 4

由于id_delete是提交按钮，因此您需要在click事件处理程序中调用preventDefault（）来停止提交表单：

$(document).ready(function (){
    $("#id_delete").click(function(e){ // add "e" for click event object
        var temp=$("#id_frm input:checkbox:checked");
        var len=temp.length;
        if(len==0) {
            alert("Please select the order.");
            e.preventDefault(); // stop form submission
        } else {
            if(confirm("Are you sure to delete the selected orders.")) {
                // no need to submit the form manually
                // the browser will do so after this function completes successfully
                // $("#id_frm").submit();
            } else {
                temp.checked=false;
                e.preventDefault(); // prevent default here as well
            }
        }
    });
});

如何使用JQUERY停止提交表单？

4 个答案: