JQuery Добавление полей формы клонирования - имя приращения

Question

Я смотрю на эту скрипту http://jsfiddle.net/yezw6c51/1/, которая делает то, что мне нужно сделать за одним исключением.

При загрузке он один поле ввода имени «phone_number»

При нажатии на Add phone number вы можете добавить несколько строк/полей ввода, как например:

Каждое новое поле ввода, добавлено, что это имя поля увеличилось. например: phone_number1, phone_number2 и т. д. Это отлично работает.

Но я хотел бы текст перед каждым полем ввода также имеют измененное значение, добавив также, так что вы в конечном итоге с:

Так текстовое описание увеличивается на единицу с тем же значением как поле phone_number.

т.е. номер телефона 2 = PHONE_NUMBER2 и т.д.

Как я могу это сделать?

Благодаря

Answer 1

Wrap текст с пролетом

<span>Phone number :</span> 

Тогда ваш может изменить только текст внутри диапазона

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

скрипку: http://jsfiddle.net/yezw6c51/16/

Answer 2

вместо того чтобы каждый вход другого имена, вы можете использовать name = "phoneNumber []" и зацикливать ugh в почтовых ключах в backend. Демонстрация: 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); 
    }); 
}); 

});

Answer 3

Вы можете использовать пробел после «номера телефона» в своем 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/