Question

I am using a 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 gets cloned the input elements NAME and ID tags need to be modified so that we can identify the data in the server side script.

I have the following code that clones the 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 having trouble modifying the LABEL FOR attributes. Anybody know how to do this?

Answer 1

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

However, you can replace your loop by a single jQuery call and avoid this issue:

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