Targeting a specific form with serialize ()
Following on from my previous question that was answered so quickly by Meder , it wasn't funny, now there is an additional question that came up in the process of creating a reusable jQuery form that doesn't take the user away from where they were.
Problem
The jQuery function serialize()
does its magic on all forms within the page, not on the specific form that was submitted. Sample code below.
How do I write the unique name / id of the form and replace "form"
internally $("form").serialize()
with the name of the target form to only be serialized?
Form code
<form name="contact" id="contact" action="">
<input name="_recipients" type="hidden" value="joe@fake.com" />
<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 Session and Post
var dataString = $("form").serialize();
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/_global/assets/scripts/formmail/formmail.asp",
data: dataString,
...
source to share
var dataString = $('#contact').serialize()
If you attach an event handler to a button or form event submit
, then you can refer to it using this
if inside the function scope of the event handler submit
, for example
$('#contact').submit(function() {
alert( $(this).serialize() );
});
I highly recommend reading http://docs.jquery.com/Selectors
source to share
By using the string "form" as a selector, you actually get all the elements FORM
on the page, to select only one form, you can:
Get a 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();
source to share
$("#contact").serialize()
Instead of using, serialize
there is a nice plugin that allows you to publish your forms asynchronously. All you have to do is:
$(function() {)
$('#contact').ajaxForm();
});
Also do not forget to assign the correct action to the form, it must not be empty.
source to share