serialize :: Form

serialize(formElement) -> string Serialize form data to a string suitable for Ajax requests.

The result is a string in form "name=johnny&color=blue", suitable for parameters in an Ajax request. This method mimics the way browsers serialize forms natively so that form data can be sent without refreshing the page.

Example

<form id="person-example" class="example" action="#">

<input type="text" name="username" id="username" value="Sulien" />

<input type="text" name="age" id="age" size="3" value="22" />

<select name="hobbies" id="hobbies">

<option value="coding">Coding</option>

<option value="swimming">Swimming</option> <!-- selected -->

<option value="hiking">Hiking</option>

<option value="drawing">Drawing</option>

</select>

<button type="submit">Send</button>

</form>

$('person-example').serialize()

// -> 'username=sulien&age=22&hobbies=swimming'

Notes

Disabled form elements are not serialized (as per W3C HTML recommendation).

Also, file inputs are skipped as they cannot be serialized and sent using only JavaScript.

Keep in mind that "hobbies" multiple select should really be named "hobbies[]" if we're posting to a PHP or Ruby on Rails backend because we want to send an array of values instead of a single one. This has nothing to do with JavaScript - Prototype doesn't do any magic with the names of your controls, leaving these decisions entirely up to you.

Prototype API 1.5.0 - prototypejs.org