jQuery get area to modify by ID then by ID of componet

Question

Hey all I can not seem to get this to work in jQuery even though I know that it can:

my HTML code:

<div class="cd-panel from-right" id="va">
    <header class="cd-panel-header" style="max-width: 600px;">
        <h1 style="margin-top: 5px;" id="panHeading"></h1>
    </header>
    <div class="cd-panel-container" style="max-width: 600px; width: 600px;">
    [more html code here...]
    <div class="input-group">
       <div class="input-group-addon">
          <span class="glyphicon glyphicon-envelope"></span>
       </div>
       <div class="col-sm-10">
          <input name="RequestID" disabled="True" class="form-control input-sm" 
           id="RequestID" style="width: 520px; max-width: 520px;" type="text">
       </div>
    </div>
    [more html code here...]
</div>
<div class="cd-panel from-right" id="VDA">
    <header class="cd-panel-header" style="max-width: 600px;">
        <h1 style="margin-top: 5px;" id="panHeading"></h1>
    </header>
    <div class="cd-panel-container" style="max-width: 600px; width: 600px;">
    [more html code here...]
    <div class="input-group">
       <div class="input-group-addon">
          <span class="glyphicon glyphicon-envelope"></span>
       </div>
       <div class="col-sm-10">
          <input name="RequestID" disabled="True" class="form-control input-sm" 
           id="RequestID" style="width: 520px; max-width: 520px;" type="text">
       </div>
    </div>
    [more html code here...]
</div>

And this is my jQuery code:

if (responce["personData1"][0].RequestID != 1) {
   $('#va > #RequestID').val(responce["personData1"][0].RequestID);
}

But it never puts the value inside that RequestID text box for VA even though it does have a value for RequestID. If I do this:

$('#RequestID').val(responce["personData1"][0].RequestID);

Then it has the value inside the text box.

What would I be missing?

Is `RequestID` is used here for the sake of explaining or is it litterally that? If it is then this is wrong as IDs should be uniques! — ibrahim mahrir, Apr 05 '17 at 18:14
@StealthRT, No you can't. [id](https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id) "The id global attribute defines a unique identifier (ID) which must be unique in the whole document." — Satpal, Apr 05 '17 at 18:18
If you've respected the fact that IDs should be unique you wouldn't be in this dilemma in the first place. You could've just select them directly like `$("#id")`! — ibrahim mahrir, Apr 05 '17 at 18:18
@ibrahimmahrir if you look at my code again you will see that I have unique identifiers but same element names *within* that unique id. — StealthRT, Apr 05 '17 at 18:21
You don't have unique identifiers! There is two `id="RequestID"` and two `id="panHeading"`! — ibrahim mahrir, Apr 05 '17 at 18:23
Unique ID > **
....
** and then for the next set of DIVs **
...
** Unique ID's are **va** and **VDA**. — StealthRT, Apr 05 '17 at 18:24
IDs should be unique in the whole document not just inside an element! — ibrahim mahrir, Apr 05 '17 at 18:25

Satpal · Accepted Answer · 2017-04-05T18:22:27.750

You need to use, get rid of > it looks for immediate child and RequestID is not the child of va element.

$('#va #RequestID').val(responce["personData1"][0].RequestID)

Also note Identifiers in HTML must be unique. You can assign a class and then use it like

 <input name="RequestID" disabled="True" class="form-control input-sm RequestID"  style="width: 520px; max-width: 520px;" type="text">

and then

$('#va .RequestID').val(responce["personData1"][0].RequestID)

score 1 · Answer 2 · edited Apr 05 '17 at 18:18

1

Try this:

$("#va [name='RequestID']").val(responce["personData1"][0].RequestID);

I think the problem is that you're trying to get an ID child of an ID, which should be unique, but you're using "RequestID" as ID on multiple elements.

edited Apr 05 '17 at 18:18

Satpal

132,252
13
159
168

answered Apr 05 '17 at 18:14

nixkuroi

2,259
1
19
25

score 0 · Answer 3 · edited May 23 '17 at 12:09

ID are designed to be a unique selector on the page. So the search would stop after the first match If you'd like to select multiple elements on the page based on a common pattern you should go for class selectors.

Now, to answer your question : HTML:

<input name="RequestID" disabled="True" class="some-input-class form-control input-sm" id="RequestID" style="width: 520px; max-width: 520px;" type="text">

and JS:

if (responce["personData1"][0].RequestID != 1) {
    $('#va .some-input-class').val(responce["personData1"][0].RequestID);
}

jsFiddle example here

References:

W3C docs

Is selecting by class or id faster than selecting by some other attribute?

jQuery get area to modify by ID then by ID of componet

3 Answers3