Jumpa
Jumpa

Reputation: 4409

jQuery Textarea Selector Inside Form

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

Answers (3)

Sridhar R
Sridhar R

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

Rory McCrossan
Rory McCrossan

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>

Example fiddle

Upvotes: 1

Arun P Johny
Arun P Johny

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

Related Questions