Prevent form from being submitted - jquery? [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

How to prevent form from being submitted?

Here is my jquery code:

$(document).ready(function() {
    $("#register").submit(function (event) {
    var email = $('#email-agency').val();
    /* EMAIL VALIDATION */
    if (email == ""){
        $('#email-agency').css({"border-color":"#3399ff"});
        $('#email-err').html("You must enter your e-mail address.").removeClass("success_msg").addClass("error_msg");
    }else{
        $('#email-err').html("<img src='http://www.site.com/folder/ajax-loader.gif' />&nbsp;&nbsp;&nbsp;Validating the e-mail address...").removeClass("success_msg").removeClass("error_msg");
        $.get('http://www.site.com/folder/email.php',{id: email}, function(result){
            if (result == "invalid format"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html(email + " is not a valid e-mail address.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                return false;
            }else if (result == "taken"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html("I'm sorry, this e-开发者_如何学Gomail address is already taken.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                return false;
            }else if (result == "available"){
                $('#email-agency').css({"border-color":"#1f6d21"});
                $('#email-err').html("Congratulations, this e-mail address is available.").removeClass("error_msg").addClass("success_msg");
                return true;
            }
        })
    }
});

For some reason, if the e-mail address is taken (result == "taken") - the form still submits.

What am I doing wrong? How can I make the form not submit if the e-mail address is taken?

Thank you

---

It's because you are returning false from the $.get(function() instead of the $("#register").submit(function()

Because your AJAX call is being made async you also can't set a variable with the return value of the AJAX call.

Because the function is already finished while the AJAX call may still be in progress.

You could use:

async: false

And instead of doing return false / true do:

var valid = false; // at top of submit function

and instead of doing the returns do: valid = true; // or false

And at the end of the submit function do:

return valid;

EDIT

Sorry.

By looking at the docs of .get() it looks like .get() doesn't take an async param.

You can use the .ajax() function instead. (get is a shorthand for ajax).

http://api.jquery.com/jQuery.ajax/

EDIT2

$(document).ready(function() {
    $("#register").submit(function (event) {

    var valid = false;

    var email = $('#email-agency').val();
    if (email == ""){
        $('#email-agency').css({"border-color":"#3399ff"});
        $('#email-err').html("You must enter your e-mail address.").removeClass("success_msg").addClass("error_msg");
    }else{
        $('#email-err').html("<img src='http://www.site.com/folder/ajax-loader.gif' />&nbsp;&nbsp;&nbsp;Validating the e-mail address...").removeClass("success_msg").removeClass("error_msg");
        $.get('http://www.site.com/folder/email.php',{id: email}, function(result){
            if (result == "invalid format"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html(email + " is not a valid e-mail address.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                valid false;
            }else if (result == "taken"){
                $('#email-agency').css({"border-color":"#3399ff"});
                $('#email-err').html("I'm sorry, this e-mail address is already taken.").removeClass("success_msg").addClass("error_msg");
                event.preventDefault();
                valid false;
            }else if (result == "available"){
                $('#email-agency').css({"border-color":"#1f6d21"});
                $('#email-err').html("Congratulations, this e-mail address is available.").removeClass("error_msg").addClass("success_msg");
                valid true;
            }
        })
    }
    return valid;
    });
});

---

You are making an asynchronous call which means that your first function will return. Instead what you should do if you want to do like that is to return false on the first call. Then depending on the answer on the second call you can call $("form").submit() or display an error. Right now you are returning false into the AJAX callback.

Essentially you want to do this:

function validate(e){
  e.preventDefault(); //Stop form from submitting

  $.get(/*foo*/, function(response){
    if( response ){ //yay validates
      $("form").submit();
    }else{ //Doesn't validate show error.
      $("form .error").show();
    }
  });
}

---

Just do:

return $.get('http://www.site.com/folder/email.php',{id: email}, function(result){ 
  //more code
}