Hi everyone im currently busy trying to convert a duplicatable form to an jsonstring, for each duplicate it needs to add to the string for example with one form on submit it gives me – {"dependant1":[{"name":"lllll"}]} but when i add another form it gives me – {"dependant1":[{"name":"xxx"}],"dependant2":[{"name":"xxx"}]} so basically the latest one overwrites for the previous one.
anyways JS Fiddle link – http://jsfiddle.net/dawidvdh/zWwEb/
Im really bad at explain things.. so please just ask any questions.
Heres the code:
JS
//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' name='name' />";
var surname_input = "<input class='surname' name='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++;
currentdep ='dependant-'+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
//submit function
var result = {};
var dependants = {};
jQuery('#submit').click(function(){
$('.dependant').each(function(k, v){
dependants['name'] = $(v).find('.name').val();
result['dependant'+g_counter] = [dependants];
});
var jsonData = JSON.stringify(result);
console.log(g_counter);
console.log(jsonData);
});
//submit function
});
HTML
<div id="dependant-1" class="dependant">
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>
<button id="submit">submit</button>
A long time ago this issue consume half of my work day…
The fix is pretty easy – move the following line:
in the
like this:
This is causing your problem because the variable dependants is global for your function. You are setting to it different value and then result[key] is pointing to it. So, finally, in your result object you have several keys that are pointing to the same dependants variable. And because dependants is global for the function it holds the last value after all.
Finally, each key of your result object points to the same value.
I hope this helps.