Jquery insert data from variable into dynamic input

Question

I am attempting to insert data into an input that is labeled. "Proposed Destruction Date" Unfortunately the ids and name are dynamic and can't be used. I am attempting to find the label then the next input after the label. I am lost on the best way to do this.

Here is the code from the label and input. I don't have control over.

$("label:contains('Proposed Destruction Date:')").css("background-color", "green");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="x-form-item " tabindex="-1" id="ext-gen234">
   <label for="ext-comp-1071" style="width:154px;" class="x-form-item-label" id="ext-gen235">Proposed Destruction Date:</label>
   <div class="x-form-element" id="x-form-el-ext-comp-1071" style="padding-left:159px">
     <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen236" style="width: 95px;">
       <input type="text" size="10" autocomplete="off" id="ext-comp-1071" name="DEST1-2596" class="x-form-text x-form-field" style="width: 70px;">
       <img src="/LMS/js1910280933/ext/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-date-trigger" id="ext-gen237">
     </div>
     <div class="lms-form-field-msg-area" style="left:262px;" id="ext-gen238">
      <span id="ext-comp-1071-msg" class="lms-form-field-error"></span>
     </div>
    </div>
    <div class="x-form-clear-left">
  </div>
</div>

Here is the code I have written to try and find this input. So far I can't find the label or if I can it is not turning green. Please let me know if there is a better way to find this input with out the id or name since those change.

Thanks for all your help

When converted into a code snippet in the question, it appears to work as expected. Can you clarify the problem? For example, in the actual code where specifically are these segments placed? Are you trying to execute the JavaScript before the HTML loads? — David
– David, Commented May 21, 2020 at 14:10
As above: snippets in SO always append the scripts box to the output after the HTML so don't have the same issue. If it works here, but doesn't work for OP then it's likely doc.ready is required. — fdomn-m
– fdomn-m, Commented May 21, 2020 at 14:22
The following is working $("label:contains('Proposed Destruction Date:') + .x-form-element input").val(dts1); I have a followup question this is a date field in the first input box it is in "MM/DD/YYY" when I move it from the variable to the second input it is"YYYY/MM/DD" How can I control it in the variable. I can create a new question if needed. I would like it to show "MM/DD/YYYY" in the second box if you type it manually that is how it is. — why
– why, Commented May 21, 2020 at 15:38

user120242 · Accepted Answer · 2020-05-21 14:20:43Z

1

+ matches the next sibling You could also have used .next() to traverse. ~ will match all next siblings, if you need to find all following siblings.

$("label:contains('Proposed Destruction Date:') + .x-form-element input").css("background-color", "green");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="x-form-item " tabindex="-1" id="ext-gen234">
   <label for="ext-comp-1071" style="width:154px;" class="x-form-item-label" id="ext-gen235">Proposed Destruction Date:</label>
   <div class="x-form-element" id="x-form-el-ext-comp-1071" style="padding-left:159px">
     <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen236" style="width: 95px;">
       <input type="text" size="10" autocomplete="off" id="ext-comp-1071" name="DEST1-2596" class="x-form-text x-form-field" style="width: 70px;">
       <img src="/LMS/js1910280933/ext/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-date-trigger" id="ext-gen237">
     </div>
     <div class="lms-form-field-msg-area" style="left:262px;" id="ext-gen238">
      <span id="ext-comp-1071-msg" class="lms-form-field-error"></span>
     </div>
    </div>
    <div class="x-form-clear-left">
  </div>
</div>

edited May 21, 2020 at 14:20

answered May 21, 2020 at 14:13

user120242

15.3k3 gold badges43 silver badges53 bronze badges

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

1 Comment

why Over a year ago

Thank you so much this works now I just have to insert the variable.

Collectives™ on Stack Overflow

Jquery insert data from variable into dynamic input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related