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添加克隆表單字段 - 增量名

回答

相關問題