How to stop the submission of the form using JQUERY?

Question

Hello frineds!

I have a form which have many check boxes in it. User will check one or many checkboxes and click on Delete button which is actually submit button then the respective records for selected check boxes are get deleted.

Required operation steps are as follows:-

When user selects one or more checkboxes and clicks the submit button then a JQUERY code is get executed in which

1. It should checks that if any check box is selected; if not; then is displays alert message and do not submit the form.
2. If it founds that one or more checkboxes are selected it should ask user for his/her confirmation using confirm alert box about the confirmation of deletion.
3. If user press YES button on confirm box then it should submit the form using javascript submit statement.
4. If user pressed the NO button then it should unchecks the checked selected checkboxes and should not submit the form.

This is the JQUERY code I had written.

$(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;
            }
        }
    });     
});

Problems:

This code is not working properly. Here 1. It submits form when there is no check box is selected. 2. It submits the form when user press NO button on confirmation dialog box.

I want to write this code on button click event only.

Please guide me friends in this problem.

Answer 1

Here is the general pattern.

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

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

Answer 2

$(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 3

Here is how :

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

Answer 4

Since id_delete is the submit button, you'll need to call preventDefault() in the click event handler to stop the form from being submitted:

$(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
            }
        }
    });
});