Question

I’m busy making a clone-able form.

I’m currently stuck, I have 13 input fields for one value being id, and i can clone it and it updates the class of group to “group1”, “group2” etc i need to get the value of the first group of input fields then the second etc.

Here’s the js fiddle: http://jsfiddle.net/dawidvdh/BLdDE/

and here’s the jQuery:

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant"+d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables

//General Variables
//Generate variables
var id_fields       =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var passport_fields =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var cell_fields     =   [0,1,2,3,4,5,6,7,8,9,10];

var id_input = "<input class='id' id="+'"'+"group"+g_counter+++'"'+" "+" maxlength='1' />";
//Generate variables

jQuery(document).ready(function(e) {
//populate jquery generated fields
jQuery(id_fields).each(function() {
    jQuery(id_input).appendTo('#id_field');
});
//populate jquery generated fields
//Cloning Function
jQuery('#clone').click(function(){
    clone_dependant();
});

function clone_dependant(){
    g_counter++;
    var clonedObj=jQuery('#id_field').clone().insertAfter("#id_field");
        clonedObj.find('.id').each(function(){
             $(this).prop('id', 'group'+g_counter).val(''); // chain the commands
    });
};
//Cloning Function
//Validation
function validate_gen(){};
function validate_Id(current_group){
    console.log(current_group);
};
function validate_Pass(){};
function validate_Email(){};
function validate_Cell(){};
//Validation
//Multiple Inputs function
$(document).on('keydown', 'input.id', function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         //Validate(current);
    }
});  

$(document).on('keyup', 'input.id', function(){
    var current_group = this.id;
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          validate_Id(current_group);
        }  
    }
});
//Multiple Inputs function

});

and the html

<div id="id_field"></div>
<button id="clone">clone</button>

Any Help Greatly Apreciated, Thank you 🙂

Answer 1

The problem with your code is you are having the same id for all the input's in a group. This will mess it up when extracting then values.

It will be better if you avoid the id's for the input's completely and give a unique id to the div that encases them as a whole.. (maybe group1 , group2 ....)

Something of this way should help..

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant" + d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables
var input_groups = ["group-1"];
//General Variables
//Generate variables
var id_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var passport_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var cell_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var id_input = "<input class='id' maxlength='1' />";
//Generate variables
jQuery(document).ready(function(e) {
    //populate jquery generated fields
    jQuery(id_fields).each(function() {
        jQuery(id_input).appendTo('#group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        var clonedObj = jQuery('#group-1')
                              .clone().insertAfter("#group-" + g_counter);
        g_counter++;
        var newDivId = 'group-'+ g_counter;
        clonedObj.prop('id' ,newDivId ).find('input').each(function() {
            this.value = ''; // chain the commands
        });
        input_groups.push(newDivId);
    };
    //Cloning Function
    //Validation


    function validate_gen() {};

    function validate_Id(current_group) {
       // console.log(current_group);
    };

    function validate_Pass() {};

    function validate_Email() {};

    function validate_Cell() {};
    //Validation
    //Multiple Inputs function
    $(document).on('keydown', 'input.id', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.id', function() {
        var current_group = this.id;
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input').length) {
                $this.next().focus();
            } else {
                validate_Id(current_group);
            }
        }
    });

    $('#getvalues').on('click', function(){
        $.each(input_groups , function(i){
            var id = input_groups[i];
            var values = $.map($('#'+id + ' input') , function(e,i){
                return $(e).val();
            }).join(' :: ');

            console.log('The values inside ' + id + ' : are ' + values);
        });            
    });
    //Multiple Inputs function
});​

Check Fiddle

UPDATE

If that’s the case I would clone the dependant div itself instead of doing it for all the div’s specifically.

Secondly you do not need to loop over each group to set the same value..

Try this

function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;

        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false)
                                           .attr('id', 'dependant-'+g_counter);
        var cell_newDiv = 'cell-group-'+ g_counter;
        var age_newDiv = 'age-group-'+ g_counter;
        var pass_newDiv = 'pass-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;

        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );
        $clonedDiv.find('#age-group-1').attr('id',"#age-group-" + g_counter );
        $clonedDiv.find('#cell-group-1').attr('id',"#cell-group-" + g_counter );
        $clonedDiv.find('#pass-group-1').attr('id',"#pass-group-" + g_counter );

        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);

        cell_input_groups.push(cell_newDiv);
        age_input_groups.push(age_newDiv);
        pass_input_groups.push(pass_newDiv);
        input_groups.push(id_newDiv);
    };

UPDATED FIDDLE