Jquery添加克隆表单字段 - 增量名

-1

我正在看这个小提琴http://jsfiddle.net/yezw6c51/1/这就是我需要做的一个例外。Jquery添加克隆表单字段 - 增量名

当加载它有一个输入字段命名为“PHONE_NUMBER”

当你Add phone number点击就可以添加多行/输入字段，例如：

enter image description here

每一个新的输入字段被添加了它的字段名称已增加。例如：phone_number1，phone_number2等。这工作正常。

但我想文本之前每个输入字段也有增加的值的增加一样，所以你最终：

enter image description here

所以文字描述递增以相同的值作为phone_number字段。

ie：电话号码2 = phone_number2等

我该怎么做？

感谢

来源

2014-10-08 Rocket

那你尝试修改它，你想要的方式？ – blue112 2014-10-08 12:30:20

鉴于jQuery已经（明确）使用计数器来增加''元素的细节，所以您只需将该计数器插入其他位置（以及）。你卡在哪里？ – 2014-10-08 12:35:47

尽管jQuery可以正常工作，但您也可以[使用角度来做到这一点]（http://jsfiddle.net/yezw6c51/21/）！只是思考的食物。 – Stryner 2014-10-08 12:44:01

与跨度包装你的文字

<span>Phone number :</span>

然后你可以改变内部跨度只有文字

$(this).parent().find('span').text('Phone number ' + phone_number_form_index);

小提琴：http://jsfiddle.net/yezw6c51/16/

来源

2014-10-08 12:39:05 brunozrk

谢谢，我明白这一点以及它是如何工作的 – Rocket 2014-10-08 12:53:21

，而不是给不同的各个输入名称，您可以使用name =“phoneNumber []”并循环播放呃后端的邮件键。演示：http://jsfiddle.net/artuc/yezw6c51/23/

HTML：

<form name="test"> 
    <div class="formRow"> 
     <label>Phone Number <span>1</span>:</label> 
     <input type="text" name="phoneNumber[]" /> 
    </div> 

    <a href="javascript:void(0);" class="btnAdd">Add [+]</a> 
</form>

JS：

$(document).ready(function(){ 
$('.btnAdd').click(function(){ 
    base = $('.formRow:first'); 
    newRow = base.clone().insertAfter($('.formRow:last')); 
    newRow.find('input').val(''); 
    newRow.find('label>span').text(newRow.index('.formRow')+1); 
    newRow.append('<input type="button" class="btnRemove" value="Remove"/>'); 
}); 

$(document).on('click', '.btnRemove', function(){ 
    $(this).parent().remove(); 
    //update index 
    $('.formRow').each(function(){ 
     target = $(this).find('label>span'); 
     target.text($(this).index('.formRow')+1); 
    }); 
});

}）;

来源

2014-10-08 12:44:28 artuc

您可以在HTML中的“电话号码”后使用一个范围。

，并在你的脚本这些变化

$(document).ready(function(){ 
    var phone_number_form_index=1; 
    $("#add_phone_number").click(function(){ 
     phone_number_form_index++; 
     $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index)); 
     $("#phone_number_form" + phone_number_form_index).css("display","inline"); 
     $("#phone_number_form" + phone_number_form_index).find("span").html(phone_number_form_index); 
     $("#phone_number_form" + phone_number_form_index + " :input").each(function(){ 
      $(this).attr("name",$(this).attr("name") + phone_number_form_index); 
      $(this).attr("id",$(this).attr("id") + phone_number_form_index); 
      }); 
     $("#remove_phone_number" + phone_number_form_index).click(function(){ 
      $(this).closest("div").remove(); 
     }); 
    }); 
});

退房这里 http://jsfiddle.net/yezw6c51/24/

来源

2014-10-08 12:49:25

Jquery添加克隆表单字段 - 增量名

回答

相关问题