jQuery: How to use .each() once per item as it loops

Question

I have a small jQuery script that is designed to copy an external form input label and stick it inside the form input (to make a system-generated form look nicer):

jQuery to move input labels inside inputs:

$('.formFieldLabel').each(function( index ) {
    var labels = $(this).text();
    if( !$(this).val() ) {
        $(this).parentsUntil("table").find('.formFieldText, .formTextArea').val(labels);
    };
})

HTML:

<table cellspacing="0" cellpadding="0">
<tr>
<td class="formFieldLabel" >
First Name</td>
<td class="formFieldLabel" style="padding-left: 5px">
Last Name</td>
</tr>
<tr>
<td >
<input type="text" class="l6e formFieldText formFieldMediumLeft" id="form_0048_fld_1_fn" name="First Name" value="">
</td>
<td style="padding-left: 5px">
<input type="text" class="l6e formFieldText formFieldMediumRight" id="form_0048_fld_1_ln" name="Last Name" value="">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td class="formFieldLabel">
Email Address</td>
</tr>
<tr>
<td colspan="2">
<input type="Email" class="l6e formFieldText formFieldLarge" id="form_0048_fld_1_em" name="E-mail Address" value="">
</td>
</tr>
</table>

Currently, it sets the value inside the input to be the last-processed item that .each() touches, rather than doing one input and them moving onto the next. I realize I'm missing something obvious here in all likelihood, but what could it be?

Answer 1

Assuming there's a 1:1 relationship between the labels and inputs, you could reference the index to filter the input from your selection.

http://jsfiddle.net/bwZaH/

$('.formFieldLabel').each(function( index ) {
    var labels = $(this).text();
    if( !$(this).val() ) {
        $(this).parentsUntil("table").find('.formFieldText, .formTextArea').eq(index).val(labels);
    };
})

Edit!

If you can make changes to the mark up, I'd recommend updating your text to use <label> elements. Point the for attribute to your input (making it more accessible) and simplifying your jQuery loop. Something like this:

HTML

<td class="formFieldLabel" >
    <label for="form_0048_fld_1_fn">First Name</label>
</td>

JavaScript

$('label').each(function(index) {
    var labels = $(this).text();
    if( !$(this).val() ) {
        $('#' + $(this).attr('for')).val(labels);
    };
})

Demo: http://jsfiddle.net/bwZaH/1/

Answer 2

You could use the name attribute to find them. (You'd have to change your email name attr).

$('.formFieldLabel').each(function (index) {
    var labels = $(this).text();
    if (!$(this).val()) {
        $('[name="' + labels + '"]').val(labels);
    };
})

The reason what you have isn't working, is that is is finding and setting all .formFieldText, .formTextArea each time.

http://jsfiddle.net/E3JfE/

Answer 3

Your problem is : For each value you get from the .formFieldLabel fields, you modify the value of all the input fields. So the ending state is : every input contain the last value found ...

You need to filter the selection of input to modify with an .eq() jquery selector.

And if you want to associate the fields, line by line :

$('tr').each(function(){
    var tr = $(this);
    tr.find('.formFieldLabel').each(function(index){
        tr.next('tr')
          .find('.formFieldText, .formTextArea')
          .eq(index)
          .val($(this).html());
    });
});

See the jsFiddle