0

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

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

有任何想法吗？谢谢。

4

3 回答 3

0

您正在使用jQuery，所以我强烈建议您坚持使用jQuery selector，

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

where#用于ID选择器。

于 2013-08-27T09:29:38.753 回答
0

试试这个：我知道它不是答案，但使用 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;
于 2013-08-27T09:21:58.407 回答
0

在您的按钮上，您多次使用元素 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 () {
    [...]
});
于 2013-08-27T09:31:54.157 回答