Changing a label's text by the FOR attribute

pee2pee Source

I would like to set the text of the label. Unfortunately the number 36 will change on each page refresh.

<label for="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_36_Label" class="rn_Label">TEXT HERE</label>
<input type="text" id="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">

I can get the ID by using:

var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');

How can I then use this to set the label text i.e. target the label by the value of the for attribute in JavaScript - not jQuery

So as mentioned, the number will change each time so I can't use the ID value of rn_TextInput_36_Label that the label currently has



answered 6 days ago user9366559 #1

Your element has the class rn_Label, so you can select by that.

var el = documment.querySelector(".rn_Label");

If you need to get more specific, you can include the tag name and part of the for attribute.

var el = documment.querySelector("label.rn_Label[for^=rn_TextInput_][for$=_Incident.CustomFields.c.other_action_taken]");

So this last selector selects the first element that:

  • has tag name label
  • has class name rn_Label
  • has a for attribute that starts with rn_TextInput_
  • has a for attribute that ends with _Incident.CustomFields.c.other_action_taken

And of course you can use querySelectorAll to select all elements on the page that meet that criteria.

answered 6 days ago zer00ne #2

Update 2

If this is a specific case then see Demo 2.


Objective as I understand it now is that OP needs the [for] attribute of a <label> to match the #ID of the proceeding <input>. In addition, the value of the [for] attribute should be in the text content of <label> as well.

The #IDs change so I really don't see the point in using querySelector() and call it a day. For a dynamic problem that has multiple occurrences, a solution involving iteration is needed.

The Demo 1 will:

  1. Collect all <input>s that have a <label> preceding it.

  2. Target the <label> and change its [for] attribute to the <input>'s #ID

  3. User CSS to render the value of [for] attribute as the <label>'s text.

This covers all <label>``<input> pairs.

Demo 1

var pairs = Array.from(document.querySelectorAll('label + input'));

pairs.forEach(function(input, index) {
  var label = input.previousElementSibling;
label::before {
  content: attr(for)
<label for="rn_TextInput_33_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_33_Label" class="rn_Label"></label>
<input type="text" id="rn_TextInput_34_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">

<label for="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_36_Label" class="rn_Label"></label>
<input type="text" id="rn_TextInput_35_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">

<label for="An_input_with_another_lame.and.impractical.ID" id="rn_TextInput_36_Label" class="rn_Label"></label>
<input type="text" id="" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">

<input id=''>

<input id=''>

Demo 2

var input = document.querySelector('input[name="Incident.CustomFields.c.other_action_taken"].rn_Text');

var label = input.previousElementSibling;

#rn_TextInput_36_Label::before {
  content: attr(for)
<label for="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_36_Label" class="rn_Label"></label>
<input type="text" id="rn_TextInput_90_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">

answered 6 days ago pee2pee #3

var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
document.querySelector("label[for='"+id+"']").innerText = 'new text';

It gets the ID and then uses querySelector to get the related label and sets the innertext

answered 6 days ago saeid mohammad hashem #4

you can work same as this code:

    var input = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0];
if(input.labels.length > 0) {
    var labelID = input.labels[0].id;
    document.getElementById(labelID ).innerHTML = 'New Text for this lable';
else {
     alert('there is no label for this input');

comments powered by Disqus