Autofill input values from another form

Question

The goal is for the user to fill out a series of fields in one registration form and copy their inputs to any other form they are registering themselves for. Instead of listing each field independently and setting the value I created this script to identify the fields based on a common class name and the goal is to set the value that matches.

It works fine if I replace fieldValue with something like "hi". fieldValue receives a string from each field during the loops, so it's set as "travis" on the first name field. console.log outputs fine too for the fieldValue but it just won't set.

Any thoughts?

PS: If you are wondering 'why by class name?' it's because the way these forms are generated and their name field is built with an array in mind "registration[1][field_name]" so I assign the field_name in the class list and use that to help identify. And the customer could be filling out 10 forms, some for them and some for others so it's just easier to do it this way vs trying to get the form placement that happens to have their other 'myself' info.

$('.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');
                    }
                });
            }
        });
    }
});

What it currently does is clears any existing values in the fields, so when I enter test for instance which I did to make sure 'test' was logged in one of the commented out lines, it clears test and doesn't enter anything.

Update Ok something interesting during testing 'Hi' (which fills in every input element fine). I thought to add a counter during the $(form).find('input').each(function(){.. loop and include the count in in the value ('hi'+i) . Ideally I should see this print out in order, however every input field resulted in "Hi42". So this could be where I am experiencing an issue is during the looping, the fieldValue is not matching up, however I think I would see incorrect data instead of empty fields. Will continue to test.

Answer 1

It works on first iteration and then it starts reading next empty form and populates the empty value overwriting the correct values. You have to establish which one is the original form and which ones are the can-be-copied-to forms by giving the original form an additional class. I have used "parent" class name:

 $('.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);

            }
          });
      });
    }
  });

This way you are looping through each field of the parent form to read data and inserting the data only to fields of currentForm.

Here is a sample fiddle.

Answer 2

The issue is related to what gets placed into myClass . There are some fields that did not have an additional class name added so the field either has no class name or just form-control.here (this is using bootstrap). So by adding an extra replace method like so:

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

We remove the extra form-control.here which is too broad. Then we also make sure that we don't work with inputs that have no class and then assign:

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

This works because as it was looping through the fields, it was assigning fine, but then it would hit an input element in the copied form that had no class or the same class that every other element shared. If the input was empty or had any field, like "hi", it would overwrite all other inputs because all the other ones had that class or were standard input elements.

Final working code for text inputs (will need to adjust for select, checkboxes radios):

$('.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);
                        }
                    }
                });
            }
        });
    }
});