targeting a specific form with serialize()

Question

Following on from my previous question, which was so quickly answered by Meder it wasn't funny, there's now an additional question that's popped up in the process of making a reusable jQuery form submitted that doesn't take the user away from where they were.

Problem

The jQuery serialize() function is performing its magic on all forms within a page, and not the specific form which was submitted. Example code below.

How do I capture the form's unique name/id, and replace "form" within $("form").serialize() with the name of the target form so only that is serialised?

Form code

<form name="contact" id="contact" action="">
  <input name="_recipients" type="hidden" value="[email protected]" />
  <input name="_subject" type="hidden" value="Title" />
  ...
    <fieldset>
      <label for="name" id="name_label">Name</label>
      <input type="text" name="name" id="name" size="30" value="" class="text-input" />
      <label class="error" for="name" id="name_error">This field is required.</label><br />

      <label for="email" id="email_label">Return Email</label>
      <input type="text" name="email" id="email" size="30" value="" class="text-input" />
      <label class="error" for="email" id="email_error">This field is required.</label><br />

      <label for="phone" id="phone_label">Return Phone</label>
      <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
      <label class="error" for="phone" id="phone_error">This field is required.</label><br/>

        <br />
      <input type="submit" name="submit" class="button" id="submit_btn" value="Send your suggestion" />
    </fieldset>
  </form>

jQuery serialise and post

    var dataString = $("form").serialize();
    //alert (dataString);return false;

    $.ajax({
      type: "POST",
      url: "/_global/assets/scripts/formmail/formmail.asp",
      data: dataString,
...

Answer 1

var dataString = $('#contact').serialize()

If you are attaching an event handler to a button or the form's submit event then you can refer to it with this if inside the submit event handler function scope, eg

$('#contact').submit(function() {
 alert( $(this).serialize() );
});

I highly recommend reading http://docs.jquery.com/Selectors

Answer 2

$("#contact").serialize()

Instead of using serialize there's a nice plugin that allows you to post your forms asynchronously. All you have to do is:

$(function() {)
    $('#contact').ajaxForm(); 
});

Also don't forget to assign the correct action to the form, it shouldn't be empty.

Answer 3

By using the "form" string as a selector, you are actually getting all the FORM elements within the page, in order to select only one form, you can:

Get the specific form by its id attribute (using the id selector):

var dataString = $("#contact").serialize();

Or by its name attribute (using the attributeEquals selector):

var dataString = $("form[name=contact]").serialize();