Question

I don’t know quiet where im going wrong, but i have a form that needs to duplicate. so far it duplicates but i have a validation on the field “ID”, and it only works on the first from and none of the duplicates.

Any Help Greatly Appreciated.

Heres the code:

jQuery:

    //Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var name_input_groups = ["name-group-1"];
var surname_input_groups = ["surname-group-1"];
var input_groups = ["group-1"];
var age_input_groups = ["age-group-1"];
var gender_input_groups = ["gender-group-1"];
var town_input_groups = ["town-group-1"];
var cell_input_groups = ["cell-group-1"];
var pass_input_groups = ["pass-group-1"];
var relation_input_groups = ["relation-group-1"];
//General Variables
//Generate variables
var name_fields=[0];
var surname_fields=[0];
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];
var age_fields=[0];
var gender_fields=[0];
var town_fields=[0];
var relation_fields=[0];

var name_input = "<input class='name' />";
var surname_input = "<input class='surname' />";
var id_input = "<input class='id' maxlength='1' />";
var age_input = "<input class='age' />";
var gender_input = "<input class='gender' maxlength='1' />";
var town_input = "<input class='town' />";
var cell_input = "<input class='cell' maxlength='1' />";
var pass_input = "<input class='pass' maxlength='1' />";
var relation_input ="<input type='checkbox' class='spouse' />" + 
                    "<input type='checkbox' class='ownchild' />" +
                    "<input type='checkbox' class='adopted' />" +
                    "<input type='checkbox' class='stepchild' />" +
                    "<input type='checkbox' class='parent' />" +
                    "<input type='checkbox' class='inlaw' />" +
                    "<input type='checkbox' class='brother' />" +
                    "<input type='checkbox' class='other' />";
//Generate variables
jQuery(document).ready(function(e) {
    //populate jquery generated fields
    jQuery(surname_fields).each(function() {
        jQuery(surname_input).appendTo('#surname-group-1');
    });
    jQuery(name_fields).each(function() {
        jQuery(name_input).appendTo('#name-group-1');
    });
    jQuery(id_fields).each(function() {
        jQuery(id_input).appendTo('#group-1');
    });
    jQuery(age_fields).each(function() {
        jQuery(age_input).appendTo('#age-group-1');
    });
    jQuery(gender_fields).each(function() {
        jQuery(gender_input).appendTo('#gender-group-1');
    });
    jQuery(town_fields).each(function() {
        jQuery(town_input).appendTo('#town-group-1');
    });
    jQuery(cell_fields).each(function() {
        jQuery(cell_input).appendTo('#cell-group-1');
    });
    jQuery(passport_fields).each(function() {
        jQuery(pass_input).appendTo('#pass-group-1');
    });
    jQuery(relation_fields).each(function() {
        jQuery(relation_input).appendTo('#relation-group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    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 town_newDiv = 'town-group-'+ g_counter;
        var gender_newDiv = 'gender-group-'+ g_counter;
        var age_newDiv = 'age-group-'+ g_counter;
        var pass_newDiv = 'pass-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;
        var name_newDiv = 'name-group-'+ g_counter;
        var surname_newDiv = 'surname-group-'+ g_counter;
        var relation_newDiv = 'relation-group-'+ g_counter;

        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#name-group-1').attr('id',"#name-group-" + g_counter );
        $clonedDiv.find('#surname-group-1').attr('id',"#surname-group-" + g_counter );
        $clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );
        $clonedDiv.find('#age-group-1').attr('id',"#age-group-" + g_counter );
        $clonedDiv.find('#gender-group-1').attr('id',"#gender-group-" + g_counter );
        $clonedDiv.find('#town-group-1').attr('id',"#town-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 );
        $clonedDiv.find('#relation-group-1').attr('id',"#relation-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);

        name_input_groups.push(name_newDiv);
        surname_input_groups.push(surname_newDiv);
        cell_input_groups.push(cell_newDiv);
        age_input_groups.push(age_newDiv);
        gender_input_groups.push(gender_newDiv);
        town_input_groups.push(town_newDiv);
        pass_input_groups.push(pass_newDiv);
        relation_input_groups.push(relation_newDiv);
        input_groups.push(id_newDiv);
    };
    //Cloning Function
    //Validation


    function validate_gen() {};

    function validate_Id(values) {
            var idNumber = values;
            var correct = true;
            if (idNumber.length != 13 || !isNumber(idNumber)) {correct = false;}
            var tempDate = new Date(idNumber.substring(0, 2), idNumber.substring(2, 4) - 1, idNumber.substring(4, 6));
            var today = new Date();
            var id_date = tempDate.getDate();
            var id_month = tempDate.getMonth();
            var id_year = tempDate.getFullYear();
            var currentYear = (new Date).getFullYear();
            var age = Math.floor((today-tempDate) / (365.25 * 24 * 60 * 60 * 1000));
            var fullDate = id_date + "-" + (id_month + 1) + "-" + id_year;
            if (!((tempDate.getYear() == idNumber.substring(0, 2)) && (id_month == idNumber.substring(2, 4) - 1) && (id_date == idNumber.substring(4, 6)))) {
correct = false;}
            var genderCode = idNumber.substring(6, 10);
            var gender = parseInt(genderCode) < 5000 ? "Female" : "Male";
            var citzenship = parseInt(idNumber.substring(10, 11)) == 0 ? "Yes" : "No";
            var tempTotal = 0;
            var checkSum = 0;
            var multiplier = 1;
            for (var i = 0; i < 13; ++i) {tempTotal = parseInt(idNumber.charAt(i)) * multiplier;
                if (tempTotal > 9) {tempTotal = parseInt(tempTotal.toString().charAt(0)) + parseInt(tempTotal.toString().charAt(1));}
                checkSum = checkSum + tempTotal;
                multiplier = (multiplier % 2 == 0) ? 1 : 2;}
            if ((checkSum % 10) != 0) {correct = false;};
            if (correct) {
                 $.each(age_input_groups , function(i){
                    var id = age_input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(age);
                    });
                });
               $.each(gender_input_groups , function(i){
                    var id = gender_input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(gender);
                    });
                });
                console.log(idNumber);
            }
            else {
                console.log(idNumber + "-wrong");
            }
            return false;}

        function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);};

    function validate_Pass(pass_values) {
        console.log("passport"+pass_values);
    };

    function validate_Email() {};

    function validate_Cell(cell_values) {
        if (cell_values != 10){
            console.log("Cell= "+cell_values);
        }else{
            console.log("bad");
        }
    };
    //Validation
//Multiple Inputs function
//ID
    $(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() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.id').length) {
                $this.next().focus();
            } else {
                $.each(input_groups , function(i){
                    var id = input_groups[i];
                    var values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Id(values);
                });
            }
        }
    });
//ID
//CELL
    $(document).on('keydown', 'input.cell', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.cell', function() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.cell').length) {
                $this.next().focus();
            } else {
                $.each(cell_input_groups , function(i){
                    var id = cell_input_groups[i];
                    var cell_values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Cell(cell_values);
                });
            }
        }
    });
//CELL
//Pasport
    //Multiple Inputs function
        $(document).on('keydown', 'input.pass', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.pass', function() {
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input.pass').length) {
                $this.next().focus();
            } else {
                $.each(pass_input_groups , function(i){
                    var id = pass_input_groups[i];
                    var pass_values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Pass(pass_values);
                });
            }
        }
    });
//Pasport
    //Multiple Inputs function
});

and heres the HTML:

<div id="dependant-1">
    name<div id="name-group-1"></div>
    surname<div id="surname-group-1"></div>
    id<div id="group-1"></div>
    age<div id="age-group-1"></div>
    gender<div id="gender-group-1"></div>
    townofbirth<div id="town-group-1"></div>
    cell<div id="cell-group-1"></div>
    passport<div id="pass-group-1"></div>
    relationship<div id="relation-group-1"></div>
</div>

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

also here’s a sample South African id number:
8509295266086

and the jsFiddle link – http://jsfiddle.net/dawidvdh/GdGen/

Thanks.

Answer 1

This one was fairly tricky to track down but quite easy to fix.

In the clone_dependant function, code like this is used to modify the ID of the given element:

$clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );

The problem is that you don’t need to use the # character in the ID. This line would then become:

$clonedDiv.find('#group-1').attr('id',"group-" + g_counter );

where the validation worked as it should (so you’ll need to look at doing this for the other elements that have their IDs modified).

Using the first approach, I found that I was unable to find any of the newly added elements. E.g., running console.log($("#group-" + g_counter).length); in the clone_dependant function directly after $clonedDiv was added to the DOM would output 0.