return false not stopping form submit

问题:

I'm pretty sure this shouldn't be as hard as it is. I have a form that runs the following function onsubmit:

function FORMVALIDATE_add_rota_entry() {
    var rota_date = $("#rota_date").val();
    var rota_id = $("#rota_id").val();
    var am_pm = $("#am_pm").val();
    if(rota_date == "")
    {
        alert("Please enter a date.");
        return false;
    }
    if(rota_id == "error")
    {
        alert("Please select a rota from the list.");
        return false;
    }
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        async:false,
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
                return false;
            }
        }
    });
}

It's called in the form tag by the following:

onsubmit="return FORMVALIDATE_add_rota_entry();"

And it works fine on the first two, rota_date and rota_id, with the alerts coming up when they should and it stopping the form from submitting but when it get's to the ajax call, it makes it fine, returns the right result, alerts when it should, but the return false doesn't seem to be stopping the form from submitting. Does anyone have any ideas because I'm stumped!

Thanks!

回答1:

youre doing it incorrectly. The way you are doing it, you should let the function return false always:

function FORMVALIDATE_add_rota_entry() {
    var rota_date = $("#rota_date").val();
    var rota_id = $("#rota_id").val();
    var am_pm = $("#am_pm").val();
    if(rota_date == "")
    {
        alert("Please enter a date.");
        return false;
    }
    if(rota_id == "error")
    {
        alert("Please select a rota from the list.");
        return false;
    }
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        async:false,
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
                return false;//this is called when the server responds....which in your case isnt happening in the first place

            }
        }
    });

    return false;//this should be at the end so 'false' is always returned to 'onsubmit'
}

the only purpose the return false; in the if statements serve it to prevent the ajax code from running. But there should be one at the end of the function too. This should be an easier fix tho:

onsubmit="FORMVALIDATE_add_rota_entry();return false;"

回答2:

Remove:

onsubmit="return FORMVALIDATE_add_rota_entry();"

Below your function add (where my-form is the id of the form):

$('#my-form').submit(FORMVALIDATE_add_rota_entry);

Change:

function FORMVALIDATE_add_rota_entry() {

to:

function FORMVALIDATE_add_rota_entry(event) {

And in your function change:

return false;

to

event.preventDefault();

This will not always halt the form submission as the ajax request is asynchronous and code inside will not run in time to halt the form process.

回答3:

Ok, so after trying the above solutions with no absolute success I came upon my own. I ditched the form element entirely and sent the three values onclick as below:

 onclick="FORMVALIDATE_add_rota_entry($('#rota_date').val(), $('#rota_id').val(), $('#am_pm').val());"

Then, the function became as follows:

function FORMVALIDATE_add_rota_entry(rota_date, rota_id, am_pm) {
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
            }
            else if(rota_date == "")
            {
                alert("Please enter a date.");
            }
            else if(rota_id == "error")
            {
                alert("Please select a rota from the list.");
            }
            else
            {
                $.post('/modules/rotas/add_rota_entry2', {rota_date:rota_date, rota_id:rota_id, am_pm:am_pm});
                parent.$.fn.colorbox.close();
            }
        }
    });
}

All is works as it should!

Thanks for everyones input :) }

回答4:

Try using event.preventDefault() just before the return statement.

回答5:

Rather than using

onsubmit="return FORMVALIDATE_add_rota_entry();"

try using

onclick="return FORMVALIDATE_add_rota_entry();"

You might need to add return true; at the end of your function.