自动填充其他表单中的输入值

2024-05-08 • 问答

目标是使用户在一个注册表格中填写一系列字段，并将其输入内容复制到他们要为其注册的任何其他表格中。与其独立列出每个字段并设置值，我创建了此脚本以基于通用的类名标识字段，并且目标是设置匹配的值。

如果我将fieldValue替换为“ hi”之类的东西，它将很好地工作。 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');
                    }
                });
            }
        });
    }
});

当前执行的操作是清除字段中的所有现有值，因此当我输入test以确保“ test”已记录在注释行之一中时，它将清除test而不输入任何东西。

更新在测试“ Hi”期间好一些有趣的事情（它可以很好地填充每个输入元素）。我想在 $（form）.find（'input'）。each（function（）{.. 循环中添加一个计数器，并将计数包括在值（'hi '+ i）。理想情况下，我应该按顺序看到此打印输出，但是每个输入字段都导致“ Hi42”。因此这可能是我在循环过程中遇到问题的地方，fieldValue与之不符，但是我认为我会看到不正确的数据而不是空字段。它将继续测试。

它在第一次迭代时起作用，然后开始读取下一个空表格并填充空值，以覆盖正确的值。您必须通过给原始表单一个附加的类来确定哪个是原始表单，哪些是可以复制的表单。我使用了“父”类名称：

 $('.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的字段中。

Here is a sample fiddle.

问题与 myClass 中放置的内容有关。有些字段没有添加其他的类名，因此该字段没有类名或仅是form-control。在这里（这是使用引导程序）。因此，通过添加额外的替换方法，例如：

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

我们删除了多余的form-control。此处过于宽泛。然后，我们还要确保不使用没有类的输入，然后分配：

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,"");
                        if(myClass != ''){
                            $(currentForm).find('input'+ myClass).val(fieldValue);
                        }
                    }
                });
            }
        });
    }
});

自动填充其他表单中的输入值

leehappygirl 回答：自动填充其他表单中的输入值

大家都在问