How to get textarea value from many different textarea with the same IDs

Question

How can I get a value from many different textarea tags with same IDs using jQuery? I also need to allow the user a choice of which textarea he/she wants to add a comment, and then get the comment.

This is my HTML

<div class="container">
    <div class="wall_post">
        <p>First Post</p>
        <textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
    </div>
        <div class="wall_post">
            <p>Second Post</p>
        <textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
    </div>
        <div class="wall_post">
            <p>Third Post</p>
        <textarea id="user_comment" class="form-control" placeholder="Type your comment here"></textarea>
    </div>
        <div class="wall_post">
            <p>Fourth Post</p>
        <textarea id="user_comment" class="form-control" placeholder="Type your comment here" ></textarea>
    </div>
</div>

And this is my jQuery so far

This jQuery only prints out the first textarea value, but is ignoring the others.

$(document).on('keydown', function(e) {
    var targetInput = $('#user_comment');

    if(!targetInput.is(document.activeElement)) {
        alert('Typed while not focused on #myInput!');
    }else{
        if(e.which == 13){
        alert(targetInput.val());
         targetInput.val('');

        }
  }
});

Thank you in advance!

IDs must be unique on document context... So use class instead — A. Wolff
– A. Wolff, Commented May 14, 2015 at 7:46
ok but this project is like facebook feeds, the feeds are generated from database and I try to append in the textarea with same id but how can i get a value from that specified textarea. Remember the textareas are very many. Thank you — Little Phild
– Little Phild, Commented May 14, 2015 at 7:55

Milind Anantwar · Accepted Answer · 2015-05-14 08:23:13Z

2

Ids must be unique. You can rather use classname.

Also you can use target to get current keydown element:

$(document).on('keydown', function(e) {
 var targetInput = $(e.target);
   if(!targetInput.is('textarea')) {
      alert('Typed while not focused on #myInput!');
   }else{
     if(e.which == 13){
       alert(targetInput.val());
       targetInput.val('');
    }
}});

Working Demo

edited May 14, 2015 at 8:23

answered May 14, 2015 at 7:52

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

4 Comments

Milind Anantwar Over a year ago

please remove it. i just added it for debugging the code.

Richard Dalton Over a year ago

Note that if(!targetInput.is($(document.activeElement))) will never fire as the targetInput will always be the activeElement as that is what has been selected.

Little Phild Over a year ago

@RichardDalton, you know am not good at this so how can i change it

Milind Anantwar Over a year ago

Should rather use if(!targetInput.is('textarea')) {

Richard Dalton · Accepted Answer · 2015-05-14 07:52:38Z

0

As ID's are expected to be unique jQuery will return the first element, not a list of all with that ID.

To access all of your textareas you could use this selector (assuming there is only a single text area with each wall_post div:

$('.wall_post textarea')

You could bind your keydown event to this instead as well:

$(document).on('keydown', '.wall_post textarea', function(e) {
    // do whatever you need to with this textarea
});

answered May 14, 2015 at 7:52

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Collectives™ on Stack Overflow

How to get textarea value from many different textarea with the same IDs

This is my HTML

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

This is my HTML

2 Answers 2

4 Comments

Comments

Related