Автозаполнение вводимых значений из другой формы

Question

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

Работает нормально, если я заменю fieldValue на что-то вроде «привет». fieldValue получает строку из каждого поля во время циклов, поэтому он устанавливается как «travis» в поле первого имени. console.log выводит также отлично для fieldValue, но он просто не будет установлен.

Есть мысли?

PS: Если вам интересно, «почему по названию класса?»Это происходит потому, что эти формы генерируются, а их поле имени создается с учетом массива «registration [1] [field_name]», поэтому я назначаю field_name в списке классов и использую его для идентификации. И клиент мог бы заполнить 10 форм, некоторые для них, а некоторые для других, так что проще сделать это таким образом, чем пытаться получить размещение формы, в котором, как оказалось, есть другая «я» информация.

$('.copy-myself').change(function(){
    if($(this).is(':checked')) {
        var currentForm = $(this).parent().closest('.registration .card');
        $('.registration .card').not($(this).parent().closest('.registration .card')).each(function(){
            var form = $(this);
            if($(this).find('input.myself-checkbox').is(':checked')) {
                $(form).find('input').each(function(){
                    var fieldValue = $(this).val(); //ie. "travis"
                    if($(this).attr("class")){
                        var myClass = $(this).attr("class").replace(/ /g,'.');
                        $(currentForm).find('input.'+ myClass).val(fieldValue);
                        // The following outputs current found field value if available ie "test"
                        // console.log($(currentForm).find('input.'+ myClass).val());
                        // This works if I set Hi
                        // $(currentForm).find('input.'+ myClass).val('Hi');
                    }
                });
            }
        });
    }
});

В настоящее время он очищает все существующие значения в полях, поэтому, когда я вхожу в тест, например, который я сделал, чтобы убедиться, что «тест» был зарегистрирован в одной из закомментированных строк, он очищает тест и не вводитчто-нибудь.

Обновление Хорошо, что-то интересное во время тестирования 'Привет' (который хорошо заполняет каждый элемент ввода). Я подумал добавить счетчик во время $ (form) .find ('input'). Each (function () {.. loop) и включить счетчик в значение ('hi'+ i) . В идеале я должен видеть эту распечатку по порядку, однако каждое поле ввода выдает «Hi42». Так что это может быть то, где я испытываю проблему во время цикла, fieldValue не совпадает, однакоЯ думаю, что я вижу неправильные данные вместо пустых полей. Продолжу тестирование.

Answer 1

Проблема связана с тем, что помещается в myClass . Есть некоторые поля, в которых не было добавлено дополнительное имя класса, поэтому поле либо не имеет имени класса, либо просто form-control.here (это использует bootstrap). Таким образом, добавив дополнительный метод замены, например, так:

var myClass = $(this).attr("class").replace(/ /g,'.').replace("form-control.here","");

Мы удаляем лишний файл form-control.here, который является слишком широким. Затем мы также удостоверимся, что мы не работаем с входами, которые не имеют класса, и затем присваиваем:

if(myClass != ''){
    $(currentForm).find('input'+ myClass).val(fieldValue);
}

Это работает, потому что, когда оно проходило по полям, оно назначало нормально, но тогда этонажмите на элемент ввода в скопированной форме, который не имеет класса или того же класса, что и все остальные элементы. Если бы вход был пустым или имел какое-либо поле, такое как «hi», он бы переписал все другие входные данные, потому что все остальные имели этот класс или были стандартными входными элементами.

Окончательный рабочий код для ввода текста (необходимо настроить для выбора, флажки радио):

$('.copy-myself').change(function(){
    if($(this).is(':checked')) {
        var currentForm = $(this).parent().closest('.registration .card');
        $('.registration .card').not($(this).parent().closest('.registration .card')).each(function(){
            var form = $(this);
            if($(this).find('input.myself-checkbox').is(':checked')) {
                $(form).find('input').each(function(){
                    var fieldValue = $(this).val();
                    if($(this).attr("class")){
                        var myClass = $(this).attr("class").replace(/ /g,'.').replace("form-control.here","");
                        if(myClass != ''){
                            $(currentForm).find('input'+ myClass).val(fieldValue);
                        }
                    }
                });
            }
        });
    }
});

Answer 2

Он работает на первой итерации, а затем начинает читать следующую пустую форму и заполняет пустое значение, перезаписывая правильные значения. Вы должны установить, какая из них является исходной формой, а какие - формами, которые можно скопировать, предоставив исходной форме дополнительный класс. Я использовал имя родительского класса:

 $('.copy-myself').change(function() {

    if ($(this).is(':checked')) {
      var currentForm = $(this).parent().closest('.registration.card');
      $('.registration.card.parent').each(function() {
        var form = $(this);

        $(form).find('input').each(function() {
            var fieldValue = $(this).val(); //ie. "travis"

            if ($(this).attr("class")) {
              var myClass = $(this).attr("class").replace(/ /g, '.');
              $(currentForm).find('input.' + myClass).val(fieldValue);

            }
          });
      });
    }
  });

Таким образом, вы просматриваете каждое поле родительской формы для чтения данных и вставляете данные только в поля currentForm.

Вот образец скрипки.