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

のIDに一致するlabel適切な属性がある場合は、次を使用します。forinput

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

これがフィドルです：http：//jsfiddle.net/LBEWK/

ラベルをの周りにラップする場合はinput、次を使用します。

$('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 
$.each($('label'), function() { 
    $('#' + $(this).attr('for')).val($(this).text());
});
于 2012-08-16T19:10:13.283 に答える
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 に答える
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 に答える