2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
< html lang = 'en' > < head > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > .serializeArray()< / h1 >
< / div >
2010-09-21 14:58:54 +00:00
< div data-role = "content" class = " ui-body ui-body-c" id = "serializeArray1" >
2010-09-16 17:13:38 +00:00
< h2 class = "jq-clearfix roundTop section-title" >
< span class = "name" > .serializeArray()< / span > < span class = "returns" > Returns: < a class = "return" href = "http://docs.jquery.com/Types#Array" > Array< / a > < / span >
< / h2 >
< div class = " entry-details" >
< p class = "desc" > < strong > Description: < / strong > Encode a set of form elements as an array of names and values.< / p >
< ul class = "signatures" > < li class = "signature" id = "serializeArray" > < h4 class = "name" >
< span class = "versionAdded" > version added: < a href = "/category/version/1.2/" > 1.2< / a > < / span > .serializeArray()< / h4 > < / li > < / ul >
< div class = "longdesc" >
< p > The < code > .serializeArray()< / code > method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:< / p >
< pre > < form>
< div> < input type="text" name="a" value="1" id="a" /> < /div>
< div> < input type="text" name="b" value="2" id="b" /> < /div>
< div> < input type="hidden" name="c" value="3" id="c" /> < /div>
< div>
< textarea name="d" rows="8" cols="40"> 4< /textarea>
< /div>
< div> < select name="e">
< option value="5" selected="selected"> 5< /option>
< option value="6"> 6< /option>
< option value="7"> 7< /option>
< /select> < /div>
< div>
< input type="checkbox" name="f" value="8" id="f" />
< /div>
< div>
< input type="submit" name="g" value="Submit" id="g" />
< /div>
< /form> < / pre >
< p > The < code > .serializeArray()< / code > method can act on a jQuery object that has selected individual form elements, such as < code > < input> < / code > , < code > < textarea> < / code > , and < code > < select> < / code > . However, it is typically easier to select the < code > < form> < / code > tag itself for serialization:< / p >
< pre > $('form').submit(function() {
$.print($(this).serializeArray());
return false;
});< / pre >
< p > This produces the following data structure:< / p >
< pre > [
{
name: a
value: 1
},
{
name: b
value: 2
},
{
name: c
value: 3
},
{
name: d
value: 4
},
{
name: e
value: 5
}
]< / pre >
< / div >
< h3 > Example:< / h3 >
< div id = "entry-examples" class = "entry-examples" > < div id = "example-0" >
< h4 > < span class = "desc" > Get the values from a form, iterate through them, and append them to a results display.< / span > < / h4 >
< pre > < code class = "example demo-code" > < !DOCTYPE html>
< html>
< head>
< style>
body, select { font-size:14px; }
form { margin:5px; }
p { color:red; margin:5px; }
b { color:blue; }
< /style>
< script src="http://code.jquery.com/jquery-latest.js"> < /script>
< /head>
< body>
< p> < b> Results:< /b> < span id="results"> < /span> < /p>
< form>
< select name="single">
< option> Single< /option>
< option> Single2< /option>
< /select>
< select name="multiple" multiple="multiple">
< option selected="selected"> Multiple< /option>
< option> Multiple2< /option>
< option selected="selected"> Multiple3< /option>
< /select> < br/>
< input type="checkbox" name="check" value="check1" id="ch1"/>
< label for="ch1"> check1< /label>
< input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
< label for="ch2"> check2< /label>
< input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
< label for="r1"> radio1< /label>
< input type="radio" name="radio" value="radio2" id="r2"/>
< label for="r2"> radio2< /label>
< /form>
< script>
function showValues() {
var fields = $(":input").serializeArray();
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
< /script>
< /body>
< /html> < / code > < / pre >
< h4 > Demo:< / h4 >
< div class = "demo code-demo" > < / div >
< / div > < / div >
< / div >
< / div >
< / div >
< / body > < / html >
