[英]Getting the value of multiple input fields generated by jquery
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. 我目前陷入困境,我有13个输入字段,其中一个值是id,我可以克隆它,并将组的类更新为“ group1”,“ group2”等,我需要获取第一组输入的值字段,然后第二个等等。
Here's the js fiddle: http://jsfiddle.net/dawidvdh/BLdDE/ 这是js小提琴: http : //jsfiddle.net/dawidvdh/BLdDE/
and here's the jQuery: 这是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 和HTML
<div id="id_field"></div>
<button id="clone">clone</button>
Any Help Greatly Apreciated, Thank you :) 非常感谢您的帮助,谢谢:)
The problem with your code is you are having the same id for all the input's in a group
. 您的代码存在的问题是,
input's in a group
所有input's in a group
ID相同 。 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 ....)
如果您完全避免
id's for the input's
ID,并为div赋予一个唯一的ID( 将它们作为一个整体包装),那会更好。 (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
});
UPDATE 更新
If that's the case I would clone
the d ependant div
itself instead of doing it for all the div's specifically. 如果是这种情况,我将
clone
d的ependant div
本身,而不是专门针对所有div进行clone
。
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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.