js/jQuery moving label values to defaults

Question

I want to use jQuery/js to do the following:

1. Get the values of the labels of form inputs
2. Put those labels as values in the inputs themselves
3. Hide the labels

Pretty straightforward. Since I don't want to have to type out

$('firstname input').val('First Name');
$('lastname input').val('Last Name');
$('street input').val('Street');
$('city input').val('City');

etc., how can I go about pulling the label from each element and pasting it into that element's input box?

Here's a slightly abbreviated version of the HTML:

<form action="/" method="post" id="user-register-form" accept-charset="UTF-8">
<div>
    <div id="customreg">
        <div class="firstname">
            <div class="form-item form-type-textfield form-item-first-name">
                <label for="edit-first-name">
                    First Name 
                    <span class="form-required" title="This field is required.">*</span>             </label>
                <input type="text" id="edit-first-name" name="first_name" value="" size="24" maxlength="128" class="form-text required" />
           </div>
       </div>
       <div class="lastname">
           <div class="form-item form-type-textfield form-item-last-name">
               <label for="edit-last-name"> 
                   Last Name 
                   <span class="form-required" title="This field is required.">*</span>
               </label>
               <input type="text" id="edit-last-name" name="last_name" value="" size="24" maxlength="128" class="form-text required" />
           </div>
       </div>
    </div>
    <input type="submit" id="edit-submit--3" name="op" value="Join!" class="form-submit" />
         <input type="hidden" name="form_build_id" value="form-5DDdSC4UFk_YPJIfuJgMhC4215CYJneg9PBDdetJtDQ" />
         <input type="hidden" name="form_id" value="custreg_user_register_form" />
    </div>
</form>

Answer 1

If your labels have proper for attributes matching the input's ID, use this:

$('input').val(function(){
    return $('label[for=' + this.id + ']').hide().text();
});

Here's the fiddle: http://jsfiddle.net/LBEWK/

---

If you wrap your labels around your inputs, use this:

$('input').each(function() {
    var $this = $(this),
        $label = $this.parent();

    $this.val( $label.text() );
    $label.replaceWith( $this );
});

Here's the fiddle: http://jsfiddle.net/tswkV/

Answer 2

$.each($('label'), function() { 
    $('#' + $(this).attr('for')).val($(this).text());
});

Answer 3

This would be the shortest solution:

$('input').siblings('label').each(function(index){ 
    var $this = $(this);
    $this.hide();
    $this.siblings('input').each(function(index){
        $(this).val($($this[index]).text());
    });
});

Answer 4

It would help to see the HTML, but if we assume that the label comes directly before the input, you can do this.

$('#myForm label + input').val(function() {
    return $(this).prev().text();
}).prev().hide();

Works with HTML that looks like this.

<form id="myForm">
    <label>first</label><input><br>
    <label>last</label><input><br>
    <label>phone</label><input>
</form>

If the inputs are wrapped, you can do this.

$('#myForm label > input').val(function() {
    var txt = $(this.parentNode).text();
    this.previousSibling.data = "";
    return txt;
}).unwrap();

Works with HTML like this.

<form id="myForm">
    <label>first<input></label><br>
    <label>last<input></label><br>
    <label>phone<input></label>
</form>