Question

I have a page with several forms on one page. I have a button (outside all forms) that I want to submit only ONE form, but all form data is getting submitted from all forms.

$("#indiv_save").click( function() {
    alert($("#indiv_form").serialize());  // Shows only correct form
    $.post("/admin/update", $("#indiv_form").serialize(), function(data) {
        notify(data); // quick and easy feedback
    });
});

The alert() call shows exactly what I want to submit, but then Firebug shows fields being submitted from all forms after the .post(), even though the serialize() function is identical.

All forms have different names and element ids.

What am I doing wrong?

Answer 1

You are making an ajax POST and returning. Depending on your button, it’s going to attempt to submit the page’s forms. What you need to do is prevent the default action:

 $('#indiv_save').click(function(e)
 {
      e.preventDefault();
      // Your Code Here
 });