Reputation: 4409
I've the following piece of code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
</head>
<body>
<form id="testForm" method="post" action="">
<textarea id="test" rows="15" cols="60"></textarea>
</form>
<button type="button" onclick="console.log($('#testForm :input').serializeArray());">Send</button>
</body>
</html>
Chrome console is printing an empty array, just like if #testForm :input selector is not selecting textarea. I'm looking for a way to select all form inputs and this works fine for other elements except textarea. How can I solve? Is serialize*Array* necessary or can I just use serialize method to send data to server?
Upvotes: 1
Views: 542
Reputation: 20408
.serializeArray()
needs name attribute to create a array so insert name option
<textarea name="test" id="test" rows="17" cols="65"></textarea>
Upvotes: 1
Reputation: 337550
For the serializeArray()
method to work (and your HTML to be valid) you need to give the textarea
a name
attribute:
<form id="testForm" method="post" action="">
<textarea id="test" rows="15" cols="60" name="foo"></textarea>
</form>
<button type="button" onclick="console.log($('#testForm :input').serializeArray());">Send</button>
Upvotes: 1
Reputation: 388316
.serializeArray() uses name of the input element to serialize, since your element does not have a name, it is omitted.
The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.
<textarea name="test" id="test" rows="15" cols="60"></textarea>
Demo: Fiddle
Upvotes: 1