Change the label attribute FOR

Question

I use the jQuery function to clone a DIV that contains a set of input elements:

<div class="history-form-fields"> <div class="row"> <label for="History_0_type">Type</label> <select name="History[0][type]" id="History_0_type"> <option value="">Select</option> </select> </div> <div class="row"> <label for="History_0_name">Name</label> <input type="text" name="History[0][name]" id="History_0_name" /> </div> <div class="row"> <label for="History_0_year">Year</label> <select name="History[0][year]" id="History_0_year"> <option value="">Select</option> </select> </div> </div> <input id="addAnother" type="button" value="Add Another" /> 

When this DIV is cloned, the input elements NAME and ID tags must be changed so that we can identify the data on the server side script.

I have the following code that clones a DIV and modifies the INPUT and SELECT tags:

 var counter = 0; $('#addAnother').click(function(){ var divCloned = $('.history-form-fields:first').clone(); divCloned.insertAfter('.history-form-fields:last'); initNewInputs(divCloned.children('.row'), ++counter); }); function initNewInputs(divs, idNumber) { var inputs = divs.children('input, select').get(); // find all the INPUT and SELECT tags for(var i in inputs) { inputs[i].id = inputs[i].id.replace(/\d+/, idNumber); inputs[i].name = inputs[i].name.replace(/\d+/, idNumber); } } 

However, I am unable to change the LABEL FOR attributes. Does anyone know how to do this?

Answer 1

Since for is the Javascript keyword, the HTML for attribute is displayed by the htmlFor property in Javascript.

However, you can replace your loop with a single jQuery call and avoid this problem:

 divs.children('label').attr('for', function(index, old) { return old.replace(/\d+/, idNumber); } ); 

Answer 2

Tag attributes can be accessed through the .attr () function.

Answer 3

I see that you already have an acceptable javascript answer ... but another way to handle this is to change your html. If you move the input and select the controls inside the label, you will not need to set the “for” attribute.

 <div class="history-form-fields"> <div class="row"> <label> Type <select name="History[0][type]" id="History_0_type"> <option value="">Select</option> </select> </label> </div> <div class="row"> <label> Name <input type="text" name="History[0][name]" id="History_0_name" /> </label> </div> <div class="row"> <label> Year <select name="History[0][year]" id="History_0_year"> <option value="">Select</option> </select> </label> </div> </div>