dynamically change label 'for' attribute in with Jquery

Question

I'm trying to assign the 'for' attribute to each label tag instead of manually typing it. In addition, I also want to make each 'for' equal it's corresponding input 'name'

How can I use Jquery to write code once that dynamically changes each one?

Below is my html.

I tried doing this:

$("input, select").each(function(){
  $(this).siblings().attr('for', [input=name].val)

});

but that doesn't work. Any Ideas?

$("input, select").each(function(){
  $(this).siblings().attr('for', [input=name].val)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billingArea"> 
  <p>
      <label>First Name:</label>
     <input name="billingFirstName" type="text" value="" required />
  </p>
  <p>
      <label>Last Name:</label> 
    <input name="billingLastName" type="text" value="" required />
  </p>
  <p>
      <label>Street Address:</label> 
    <input name="billingAddress1" type="text" value="" required />
  </p>
  <p>
 <label> Street Address 2: </label>
    <input name="billingAddress2" type="text" value="" />
  </p>
  <p>
    <label> City: </label>
    <input name="billingCity" type="text" value="" required />
  </p>
  <p>
    State/Province: <select name="billingState" required />
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </p>
  <p>
      <label>Postal Code:</label> <input name="billingZip" type="text" value="" required />
  </p>
</div>

Just to make sure you are aware, you do know that if you put the input inside the label, you don't need the for attribute, right? — Taplar
– Taplar, Commented Apr 10, 2018 at 19:46
Also State/Province is an odd duck not being in a label tag. — Taplar
– Taplar, Commented Apr 10, 2018 at 19:47

Antoine Louis · Accepted Answer · 2018-04-10 19:56:28Z

1

I advise you to change a bit the markup to have your inputs nested inside the label tag. This way you don't need the for attribute.

Although if you need to keep this markup, try this :

var fieldName = $(this).attr('name'); $(this).siblings().attr('for', fieldName);

$("input, select").each(function(){
  var fieldName = $(this).attr('name');
  $(this).siblings().attr('for', fieldName);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billingArea"> 
  <p>
      <label>First Name:</label>
     <input name="billingFirstName" type="text" value="" required />
  </p>
  <p>
      <label>Last Name:</label> 
    <input name="billingLastName" type="text" value="" required />
  </p>
  <p>
      <label>Street Address:</label> 
    <input name="billingAddress1" type="text" value="" required />
  </p>
  <p>
 <label> Street Address 2: </label>
    <input name="billingAddress2" type="text" value="" />
  </p>
  <p>
    <label> City: </label>
    <input name="billingCity" type="text" value="" required />
  </p>
  <p>
    State/Province: <select name="billingState" required />
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </p>
  <p>
      <label>Postal Code:</label> <input name="billingZip" type="text" value="" required />
  </p>
</div>

answered Apr 10, 2018 at 19:56

Antoine Louis

714 bronze badges

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

1 Comment

jskish00 Over a year ago

THIS WORKS! THANK YOU!

Community · Accepted Answer · 2020-06-20 09:12:55Z

You didn't add any #ids to the form controls so I added them with identical value to the [name] attribute. Instead of getting and setting attributes with jQuery methods, I use plain JavaScript because of habit. There's no real advantage of using .attr() over .set/getAttribute() or vice versa. If you still want a jQuery version, there is the jQuery equivalent commented within the Demo. Do not mix them up if you are not comfortable dereferencing jQuery Objects, use one or the other.

Note: This particular statement:

var field = $(this)[0].nextElementSibling;

The bracket notation with zero index ([0]) dereferences the jQuery Object ($("selector")) into a plain JavaScript Object (selector). The reason for dereferencing a jQuery Object is usually so a plain JavaScript property or method can be used. A jQuery methods does not recognize plain JavaScript Objects and that goes for plain JavaScript methods toward jQuery Objects as well.

Demo

Details are commented within the Demo

/* each() <label>...
|| Get <label>'s sibling element that folloows it.
|| Get that sibling's #id
|| Set the <label>'s [for] attribute value to the sibling's #id
*/
$('label').each(function(i, L) {

  //var field = $(this).next();
  var field = $(this)[0].nextElementSibling;

  //var ID = field.attr('id');
  var ID = field.id;

  //$(this).attr('for', ID);
  this.setAttribute('for', ID);
});

label,
select,
innput {
  font: inherit;
  display: inline-block;
}

label {
  width: 15ch
}

input[type=text] {
  width: 45ch
}

input[type=number] {
  width: 12ch;
  text-align: right
}

<form id="billingArea">
  <fieldset>
    <label>First Name:</label>
    <input id="billingFirstName" name="billingFirstName" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>Last Name:</label>
    <input id="billingLastName" name="billingLastName" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>Street Address:</label>
    <input id="billingAddress1" name="billingAddress1" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label> Street Address 2: </label>
    <input id="billingAddress2" name="billingAddress2" type="text" value="" />
  </fieldset>
  <fieldset>
    <label> City: </label>
    <input id="billingCity" name="billingCity" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>State/Province: </label><select id="billingState" name="billingState" required>
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </fieldset>
  <fieldset>
    <label>Postal Code:</label> <input id="billingZip" name="billingZip" type="number" value="" required min='10000' max='99999' />
  </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

dynamically change label 'for' attribute in with Jquery

2 Answers 2

1 Comment

Demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related