JQuery, передать входное значение в клонированное поле ввода

Question

У меня есть форма с несколькими полями ввода, используемыми для создания адресной книги. Если пользователь хочет добавить другой набор имен, они могут нажать на добавить еще. Если у пользователей одинаковое имя пользователя, вместо того, чтобы вводить его снова и снова, я добавил флажок.

Если пользователь выберет этот флажок, он передаст значение из поля ввода первого имени пользователя во все поля ввода имени пользователя.

Код ниже работает во втором наборе полей ввода, но когда я нажимаю на добавление больше, он не передает значения.

$('#check1, #addmore').click(function(){ 
    if (this.checked) { 
     $('.pass').val($('.original').val()); 
    } 
}); 

вот полный code.

Answer 1

Вы можете использовать класс у вас уже есть назначенный вашей кнопке, которая является классом .add_field_button. Тогда вы просто можете присвоить значение каждому значению поля ввода с идентификатором, который начинается с имени пользователя, пока проверяется элемент #check1.

//changed the selector, you already had this class present in your markup 
$('.add_field_button').on(
"click",function(){ 

    //if the check1 checkbox is checked 
    if ($("#check1").is(":checked")) { 


     /*select every id that starts with "username" and sets it value 
      to the .original input text box value*/ 
     $("[id^=username]").val($(".original").val()); 


    } 
}); 

После рассмотрения вашего jsfiddle я нашел некоторые дополнительные ошибки:

Вы используете HTML комментарии в вашем JavaScript. Вместо <!--my comment--> вам понадобится либо // for single line comments, либо /* my comment */ для многострочных комментариев.

После устранения синтаксических ошибок комментария, возможно, я столкнулся с неожиданным поведением при использовании моего первоначального ответа. Оператор if then по-прежнему применяется, но я переместил его внутри вашего события add_more, потому что он только клонировал имя пользователя после добавления третьего набора входов.

Живой пример: http://codepen.io/larryjoelane/pen/rxKZYm?editors=1010

Обновлено JavaScript:

$(document).ready(function() { 

    Number.prototype.pad = function(size) { 
    var s = String(this); 
    while (s.length < (size || 0)) { 
     s = "0" + s; 
    } 
    return s; 
    } 

    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    var c = 9; 
    $(add_button).click(function(e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     c++; 
     $(wrapper).append('<div><label><span>Template Id :</span><input type="text" name="templateid' + x + '" id="templateid' + x + '"></label><br><label><span>UNC Path :</span><input type="text" name="uncpath' + x + '" id="uncpath' + x + '"></label><br><label><span>Username :</span><input type="text" class="pass" name="username' + x + '" id="username' + x + '"></label><br><label><span>Password :</span><input type="text" name="password' + x + '" id="password' + x + '"></label><br><label><span>Name :</span><input type="text" name="scantoname' + x + '" id="scantoname' + x + '"></label><a href="#" class="remove_field btn btn-primary">Remove</a></div>'); //add input box 

     /*add input value to 'how many field*/ 
     $.each($('input[name="howmany[]"]'), function() { 

     $(this).val(x); 
     }); 

     /*add input value to 'templateid field*/ 
     $('input[name="templateid' + x + '"]').each(function() { 
     $(this).val((x).pad(3, 0)); 
     }); 

    } 

    //////////added code//////////////// 
    //if the check1 checkbox is checked 
    if ($("#check1").is(":checked")) { 

     /*select every id that starts with "username" and sets it value 
     to the .original input text box value*/ 
     $("[id^=username]").val($(".original").val()); 

    } 
    //////////added code//////////////// 

    }); 

    $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
    }) 
}); 

Answer 2

Сначала нужно добавить #addmore идентификатор вашей кнопки в HTML

<button id="addmore" class="add_field_button btn btn-primary">Add More</button> 

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

$('#check1, #addmore').click(function(){ 
    if($('#check1').is(':checked')) { 
     $('.pass').val($('.original').val()); 
    } 
});