Having multiple identical IDs in a loop and using jQuery with them

Question

I have a loop that generates a bunch of these:

<textarea id="uar"></textarea>

The same loop generates a submit link next to each textarea.

That link will post this form:

<form action="php/unApprovePost.php" method="POST" id="unApprovePost">
   <input type="hidden" id="uaid" name="uaid"/>
   <input type="hidden" id="uadc" name="uadc"/>
</form>

I populate #uaid successfully, but when I try to populate #uadc, only the first iteration of the loop has functionality. What I mean is - only the first textarea will properly post what I want. If I try using any textareas other than the first one, they don't submit anything. I think it has something to do with the uniqueness of IDs in HTML. I tried using a class .uar but that doesn't really work either - same behavior. Any help?

Here's my jQuery code:

    $('#unApprovePost').submit(function() {
        $('#uadc').val($('#uar').val());
    });

Edit: There is a dynamic amount of loop iterations, so I can't really have something like class="uar1". I tried making it class .uar for the textareas and using this jQuery code:

$('#unApprovePost').submit(function() {
   $('#uadc').val($('.uar').val());
});

But the problem persists.

Why not avoid the hidden elements altogether and just give the text area elements the id that you're assigning to the hidden inputs? — OJ.
– OJ., Commented Mar 8, 2011 at 9:23
The form is very far away from the textarea or the submit link. I have to submit using jQuery. — AKor
– AKor, Commented Mar 8, 2011 at 9:24

krtek · Accepted Answer · 2011-03-08 09:14:02Z

2

You can't have multiple HTML elements with the same id. It is just plain wrong and it can leads to some weird behavior in your pages. It is totally normal that only the first textarea works, because jQuery will look for the given id, find the first, and send the form.

It is the same problem when you're using always the same class, jQuery find the first one and send the form.

I suggest you use a different class for each textarea instead (ie uar1, uar2, uar3, etc)

answered Mar 8, 2011 at 9:14

krtek

26.7k5 gold badges60 silver badges84 bronze badges

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

Comments

Mads Mogenshøj · Accepted Answer · 2011-03-08 09:15:01Z

1

An ID is supposed to be unique on the page. jQuery/javascript only expects one element to be present when referred to by an ID.

Use either class or name to loop the elements, whichever fits your need.

answered Mar 8, 2011 at 9:15

Mads Mogenshøj

2,0581 gold badge16 silver badges23 bronze badges

Comments

Sjoerd · Accepted Answer · 2011-03-08 09:13:07Z

0

$('#uadc') returns the element with ID uadc. If you have multiple elements with that ID, it won't work.

<input name="uadc"/> will submit its value to the server using key uadc. If you have multiple inputs with the same name in the same form, it won't work.

answered Mar 8, 2011 at 9:13

Sjoerd

75.9k16 gold badges140 silver badges180 bronze badges

Comments

CraigKerstiens · Accepted Answer · 2011-03-08 09:19:16Z

0

If you wrap each of the id's and submits in their own form it should work. This would allow each submit to send the correct text area based on the selected submit.

<form action="php/unApprovePost.php" method="POST" id="unApprovePost">
    <input type="hidden" id="uaid" name="uaid"/>
    <input type="hidden" id="uadc" name="uadc"/>
    <input type="submit" id="submit" name="submit"/>
</form>

Otherwise you could manually build up a list of all id's if you truly wanted and send a list in. This might look something like:

var values = []
$.each($('#uaid'), function(i, item){
    values.append($(item).val());
}

The result would be a values array that you could then manually post to the page.

answered Mar 8, 2011 at 9:19

CraigKerstiens

5,9891 gold badge27 silver badges29 bronze badges

Collectives™ on Stack Overflow

Having multiple identical IDs in a loop and using jQuery with them

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related