2014-10-08 82 views
-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等

我該怎麼做?

感謝

+1

那你嘗試修改它,你想要的方式? – blue112 2014-10-08 12:30:20

+0

鑑於jQuery已經(明確)使用計數器來增加''元素的細節,所以您只需將該計數器插入其他位置(以及)。你卡在哪裏? – 2014-10-08 12:35:47

+0

儘管jQuery可以正常工作,但您也可以[使用角度來做到這一點](http://jsfiddle.net/yezw6c51/21/)!只是思考的食物。 – Stryner 2014-10-08 12:44:01

回答

2

與跨度包裝你的文字

<span>Phone number :</span> 

然後你可以改變內部跨度只有文字

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

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

+0

謝謝,我明白這一點以及它是如何工作的 – Rocket 2014-10-08 12:53:21

0

,而不是給不同的各個輸入名稱,您可以使用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); 
    }); 
}); 

});

0

您可以在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/