CODEWITHSUNDEEP
jquery
MAX POWER
MAX POWER

Reputation: 5448

Modify a label FOR attribute

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?

Upvotes: 7

Views: 10743

Answers (3)

Tom Brothers
Tom Brothers

Reputation: 6007

I see that you already have an acceptable javascript answer... but another way you could handle this is by changing your html. If you move the input and select controls inside the label you wouldn't need to fix 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>

Upvotes: 1

Scott
Scott

Reputation: 11186

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

Upvotes: 1

SLaks
SLaks

Reputation: 887453

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); }
);

Upvotes: 13

Related Questions