Javascript - Get Multiple textarea values with jquery

Question

I'm newbie with jQuery. I Want to get value from these two textarea, I have html like this and jquery below :

Html :

<pre>
<a id="send-thoughts" href="">Click</a>
<textarea id="message1" class="message">Hello</textarea>
<textarea id="message2" class="message">World</textarea>
</pre>

jQuery:

jQuery("a#send-thoughts").click(function() {
                var thought= jQuery("textarea.message").val();
                alert(thought);
 });

Why only one value show up ? and how to get two value of textarea ?

http://jsfiddle.net/guruhkharisma/9zp9H/

Because even if the jquery selector has two matches the val() method can only serve the value of one match. So the first match is used. — arkascha
– arkascha, Commented Oct 8, 2012 at 9:45

Nhu Trinh · Accepted Answer · 2012-10-08 09:44:54Z

2

var text = "";

jQuery("textarea.message").each(function(){
   text += jQuery(this).val() + "\n";
})

answered Oct 8, 2012 at 9:44

Nhu Trinh

14k6 gold badges65 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guruh Over a year ago

Thank alot.. I tested and It really work :) jsfiddle.net/guruhkharisma/9zp9H/11

nbrooks Over a year ago

@user1728356 Lol that's the code from my answer actually, so you're welcome :)

Anton · Accepted Answer · 2012-10-08 09:44:36Z

1

Try thought = $('textarea').text() i think this should work or thought = $('.message').text();

answered Oct 8, 2012 at 9:44

Anton

32.6k5 gold badges47 silver badges54 bronze badges

2 Comments

nbrooks Over a year ago

It doesn't. And even if it did, it still would only work for the first one...if you try and 'get' the value associated with a certain property, jQuery only returns the value of the first matched element.

nbrooks Over a year ago

Try modifying the text in your text area then clicking the link: it doesn't update to reflect any of your changes, it only includes what your hard-coded.

Littm · Accepted Answer · 2012-10-08 09:45:39Z

1

Use the each() method.

jQuery("a#send-thoughts").click(function() {
    jQuery("textarea.message").each(function() {
        var thought= $(this).val();
        alert(thought);
    });
 });

Check the online doc for more information: http://api.jquery.com/each/

answered Oct 8, 2012 at 9:45

Littm

4,9454 gold badges33 silver badges40 bronze badges

Comments

nbrooks · Accepted Answer · 2012-10-08 09:46:57Z

1

.val(), like all the jQuery getters, returns the value of the first matched form-input element. You will have to use a .each() loop and concatenate the values:

jQuery("a#send-thoughts").click(function() {
    var thought = '';
    jQuery("textarea.message").each(function() {
        thought += $(this).val() + ' ';
    });
    alert(thought);
});

answered Oct 8, 2012 at 9:46

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Comments

User404 · Accepted Answer · 2012-10-08 09:44:55Z

0

<pre>
<a id="send-thoughts" href="">Click</a>
<textarea id="message1" class="message1">Hello</textarea>
<textarea id="message2" class="message2">World</textarea>
</pre>

jQuery:

jQuery("a#send-thoughts").click(function() {
                var thought1= jQuery("textarea.message1").val();
                alert(thought1);
                var thought2= jQuery("textarea.message2").val();
                alert(thought2);
 });

answered Oct 8, 2012 at 9:44

User404

2,1902 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript - Get Multiple textarea values with jquery

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Related