Question

我刚刚创建了一个动态HTML表单，其两个字段的类型为date。这两个字段将数据发布到两个数组中。我有两个问题：

a）按下按钮时不打印数组数据。

b）由于我创建了用于存储数据的数组，因此我的动态表单似乎并不完全正常。当我按下表单上的第一个“保存条目”按钮时，它只生成新字段。它也不会删除任何字段。

我的代码是：

$(document).ready(function () {
    $('#btnAdd').click(function () {
        var $address = $('#address');
        var num = $('.clonedAddress').length;
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        newElem.children('div').each(function (i) {
            this.id = 'input' + (newNum * 10 + i);
        });
        newElem.find('input').each(function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }

        $('#btnDel').removeAttr('disabled');

    });

    $('#btnDel').click(function () {
        $('.clonedAddress:last').remove();
        $('#btnAdd').removeAttr('disabled');
        if ($('.clonedAddress').length == 0) {
            $('#btnDel').attr('disabled', 'disabled');
        }
    });
    $('#btnDel').attr('disabled', 'disabled');
});
$(function () {
    $("#datepicker1").datepicker({
        dateFormat: "yy-mm-dd"
    }).datepicker("setDate", "0");
});

var startDateArray = new Array();
var endDateArray = new Array();

function intertDates() {
    var inputs = document.getElementsById('datepicker1').value;
    var inputsend = document.getElementsById('datepicker2').value;
    startDateArray[startDateArray.length] = inputs;
    endDateArray[endDateArray.length] = inputsend;
    window.alert("Entries added!");
}

function show() {
    var content = "<b>Elements of the arrays:</b><br>";
    for (var i = 0; i < startDateArray.length; i++) {
        content += startDateArray[i] + "<br>";
    }
    for (var i = 0; i < endDateArray.length; i++) {
        content += endDateArray[i] + "<br>";
    }
}

JSFIDDLE

有什么想法吗？感谢。

Answer 1

试试这个：我知道它没有答案，但使用id获取元素值是错误的

替换

var inputs = document.getElementsById('datepicker1').value;
var inputsend = document.getElementsById('datepicker2').value;

。通过

var inputs = document.getElementById('datepicker1').value; var inputsend = document.getElementById('datepicker2').value;

Answer 2

您正在使用jQuery，因此我强烈建议您坚持使用jQuery selector，

var inputs = $('#datepicker1').val();
var inputsend = $('#datepicker2').val();

其中#用于ID选择器。

Answer 3

在你的按钮上你使用了元素ID几次，这是错误的，每个元素的ID必须是唯一的，例如：

    <button id="btnAdd" onclick="insertDates()">Save entry</button>
    </div>
</div>
<button id="btnAdd">Add Address</button>
<button id="btnDel">Delete Address</button>

jQuery只会在找到的第一个#btnAdd上附加$('#btnAdd')事件。您需要使用类将类似事件附加到多个元素，除此之外，只需将所有.click处理程序更改为.on('click',，因为on()指令将函数附加到现在和将来的元素.click()仅在加载页面时对现有元素执行的操作。

例如：

<button id="btnDel">Delete Address</button>

$('#btnDel').click(function () {
    [...]
});

变为：

<button class="btnDel">Delete Address</button>

$('.btnDel').on('click', function () {
    [...]
});

不打印数组中的日期条目

3 个答案: