Question

I have a form:

 <form name="emailform" id="emailform" onsubmit="emailSubmit()" method="post"><div>
        <input type="text" id="email" name="email" value="">
        <input class="btn" type=submit value="Submit"></div>
            </form>

Here’s emailSubmit():

    function emailSubmit(){
         $.ajax({
                      type: "POST",
                      url: "mysitesip/addemail.php",
                      data: {
                            email: $("#email").val()
                        },
                      success: function (data) {
                            $('#success').html(data);

                      }
                    });  // end Ajax    
    }

When I click on the submit buton, it posts, with the email address as a parameter, to itself, instead of addemail.php, and the page refreshes? Why is this happening? If I get rid of the method=”post”, then the form puts out a GET request to itself, but with with correct email as a parameter. This is extremely confusing to me, because the .ajax method clearly states that the type is POST. Why would changing the “method” of the form alter the posting for emailSubmit()?

The .ajax call was taken verbatim from an EXTREMELY similar usage on another one of my pages, where it works fine.

(When I say “it is POSTing” or “it is GETing”, I am using firebug to see these things)

Answer 1

You are doing nothing to cancel the standard form submission.

The net result is that the Ajax stuff submits to the URI you specify, then the form submits as normal (to the URI of the current page because you forgot the action attribute).

1. Stop using intrinsic event attributes (i.e. the onsubmit attribute)
2. Use JS event binding instead
3. prevent the default submit action
4. Make sure that you have an action attribute pointing at a sensible place so if the JS fails for any reason, the form still works. c.f. Unobtrusive JavaScript.

Or, as a quick and dirty hack … return false at the end of the onsubmit attribute.