Question

我目前正在创建一个可克隆的id输入字段..

唯一的问题是在验证id后提交，它会在控制台中显示所有重复项的相同值。

我想要实现的只是克隆字段使其运行验证并在提交时返回JSON中每个克隆字段的值。

非常感谢任何帮助。

Js Fiddle：http://jsfiddle.net/dawidvdh/tBYSA/4/

然后是代码：

jQuery -

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependant = ["dependant"];
var group;
//Clone Tracking
//General Variables
var input_groups = ["group-1"];
var idNumber;
var values;
//General Variables
//Generate variables
var id_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var id_input = "<input class='id' maxlength='1' name='id' type='text' />";

jQuery(document).ready(function(e) {
    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() {
        // 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 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 );

        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input[type="text"]').val('');


        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);
        input_groups.push(id_newDiv);
    }
    //Cloning Function
    //Validation
    function validate_Id(values) {
            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-group-'+g_counter;
                    var agevalues = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(age);
                    });
                });
               $.each(gender_input_groups , function(i){
                    var id = 'gender-group-'+g_counter;
                    console.log(gender_input_groups);
                    var gendervalues = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val(gender);
                    });
                });
                return idNumber;
            }
            else {
                console.log(idNumber + "-wrong");
            }
            return false;
        }

    function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);};
//Validation
//MainID
    $(document).on('keydown', 'input.id', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
        }
    });

    $(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];
                    values = $.map($('#'+id + ' input') , function(e,i){
                        return $(e).val();
                    }).join('');
                    validate_Id(values);
                });
            }
        }
    });
//MainID
$(document).on("click", 'input[type="checkbox"]', function() {
    jQuery(this).siblings(":checked").removeAttr('checked');
});
//Multiple Inputs function

//Basic Validation
//Digits only
jQuery(".id").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
});
//Basic Validation
//submit function
var result = {};
var dependants;
var dep_counter = 0;
jQuery('#submit').click(function(){
    jQuery('.dependant').each(function(k, v){
        dep_counter++
        dependants = {};
        result['dependant'+dep_counter] = [dependants];
        dependants['id'] = idNumber;
    });
    var jsonData = JSON.stringify(result);
    console.log(jsonData);
});
//submit function
});

然后是HTML：

<div id="dependant-1" class="dependant">
    <div id="label">id-number:</div>            <div id="group-1"></div>
    <div id="error_id" class="error"></div>
</div>

<button id="clone">Add a Dependant</button>
<button id="submit">submit</button>

提前致谢:)。

Answer 1

在函数validate_Id中，您使用的是全局变量idNumber，它将由参数values指定。所以最终这个全局变量将是最后验证的数字。

要解决此问题，您可以将idNumber更改为由相应的dep_counter索引的数组。

例如，3个更改就足够了：

将var idNumber;替换为var idNumbers = [];
将validate_Id(values);更改为：

var idNumber = validate_Id(values);

if (idNumber) { idNumbers.push(idNumber); }
将dependants['id'] = idNumber;更改为dependants['id'] = idNumbers[dep_counter];

Answer 2

我在小提琴中试过这个... 代码：

jQuery('#submit').click(function(){
jQuery('.dependant').each(function(k, v){
    dep_counter++
      dependants = {};
        result['dependant'+dep_counter] = '';
    $(v).find(':input').each(function(){
        result['dependant'+dep_counter] += $(this).val();
    });
    //dependants['id'] = idNumber;
});
var jsonData = JSON.stringify(result);
    alert(jsonData);
console.log(jsonData);
});

Jquery可克隆的输入foreach覆盖值

2 个答案: