JavaScript
Article
By Sam Deering

jQuery serializeArray() Function

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Hi guys, I thought I would do a quick post on this awesome function which can save you time if you need to create an array of form input elements and get their values.

jQuery .serializeArray() Syntax

jQuery .serializeArray() can be used to encode a set of form elements as an array of names and values. Note: only inputs with the “name” attribute present will be picked up by serializeArray().

$('selector').serializeArray();

--ADVERTISEMENT--

jQuery .serializeArray() Basic Example


(function($) {
var fields = $(':input').serializeArray(); /*creates a JSON type array structure of name and value pairs*/
jQuery.each(fields, function (i, field) {
    console.log('input' + i + ': ' + field.name + " = " + field.value);
   /* output
	* input0: name = Enter your name
	* input1: email = Enter your email
	* input2: phone = Enter your phone
	* input3: message = Enter your message
	*/
});
})(jQuery);

Try out the code in Firebug on this form: http://www.jquery4u.com/contact/

Common Errors

If you are seeing this error: TypeError: $(“:input”) is null this may be because:

  • You need to specify the jQuery namespace because you are running more jQuery libraries (such as Mootools or Prototype). If you are unsure how to do this, read here: jQuery no conflict

Update: 16/07/2011: This script can be useful to create url params from a form:

$form = $('#formid');
var url = $form.attr('action') + '?' + $form.serialize();
console.log(url);
//result action url + ? + param1 = value1  & param2 = value2 etc...
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.