0

我想使用 jQuery/js 执行以下操作：

  1. 获取表单输入标签的值
  2. 将这些标签作为输入本身的值
  3. 隐藏标签

很简单。因为我不想打字

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

等等，我怎样才能从每个元素中提取标签并将其粘贴到该元素的输入框中？

这是 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>
4

4 回答 4

4

如果您label的 s 具有与 的 ID 匹配的适当for属性input，请使用以下命令：

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

这是小提琴：http: //jsfiddle.net/LBEWK/

如果您将标签包裹在inputs 周围，请使用以下命令：

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

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

这是小提琴：http: //jsfiddle.net/tswkV/

于 2012-08-16T19:06:35.487 回答
1

这将是最短的解决方案：

$('input').siblings('label').each(function(index){ 
    var $this = $(this);
    $this.hide();
    $this.siblings('input').each(function(index){
        $(this).val($($this[index]).text());
    });
});
于 2012-08-16T19:43:52.710 回答
1 
$.each($('label'), function() { 
    $('#' + $(this).attr('for')).val($(this).text());
});
于 2012-08-16T19:10:13.283 回答
0

查看 HTML 会有所帮助，但如果我们假设标签直接出现在输入之前，您可以这样做。

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

适用于看起来像这样的 HTML。

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

如果输入被包装，您可以这样做。

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

像这样使用 HTML。

<form id="myForm">
    <label>first<input></label><br>
    <label>last<input></label><br>
    <label>phone<input></label>
</form>
于 2012-08-16T19:06:17.867 回答