Question

我有以下内容：

<table>
    <tr class="newZipDeliveryBox hide">
        <td colspan="2"><input type="text" name="newd_zipcode[]" value="" placeholder="Fx: 999-2000 eller 2200"></td>
        <td colspan="2"><input type="text" name="newd_price[]" value="" placeholder="Pris"></td>
        <td></td>
    </tr>
</table>

<a class="pointer newZipDelivery">+New</a>

使用以下JS代码，在“New”上，它会附加一个新的tr，如上所述：

$('.newZipDelivery').click(function() {
    if ($('.newZipDeliveryBox').hasClass('hide')) {
        $('.newZipDeliveryBox').removeClass('hide');
    } else {
        var $clone = $('.newZipDeliveryBox').clone();
        $clone.removeClass('newZipDeliveryBox');
        $('#deliveryZipTable > tbody > tr:last').after($clone);
    }
});

这很好用，但是当我提交表单时，只会出现第一个newd_zipcode []和newd_price []值。因此，每个元素中只有一个项目，无论我克隆了多少内容并输入了值？

我不明白为什么这不起作用？我已经读过如果输入具有相同的名称可能会出现问题，但由于这是为了在提交时输出数组，这不应该是个问题吗？

Answer 1

我将如何做

<a class="pointer newZipDelivery">+New</a>

<table class="hide">
    <tr>
        <td colspan="2">
            <input type="text" name="newd_zipcode[]" />
        </td>
        <td colspan="2">
            <input type="text" name="newd_price[]" />
        </td>
        <td></td>
    </tr>
</table>

<form id="my_form"><table>
</table></form>

$('.newZipDelivery').click(function() {
    clone = $('table.hide tr').clone();
    $('#my_form table').append(clone);
});

Fiddle here

Answer 2

我为你的代码创造了一个小提琴，如果我没有错，它的工作：点击此处：http://jsfiddle.net/lotusgodkk/GCu2D/76/ 使用Javascript：

$(document).ready(function () {
$(document).on('click', '.newZipDelivery', function () {
    var $clone = $('.newZipDeliveryBox').clone();
    $clone.removeClass('newZipDeliveryBox').find('input').val('');
    $('#deliveryZipTable > tbody > tr:last').after($clone);
    return false;
});
$(document).on('click', '.submit', function () {
    $('span').text(JSON.stringify($('form').serializeArray()));
    return false;
});
});

HTML：

<form action="/" method="get">
<table id="deliveryZipTable" class="hide">
    <tr class="newZipDeliveryBox hide">
        <td colspan="2">
            <input type="text" name="newd_zipcode[]" value="" placeholder="Fx: 999-2000 eller 2200" />
        </td>
        <td colspan="2">
            <input type="text" name="newd_price[]" value="" placeholder="Pris" />
        </td>
        <td></td>
    </tr>
</table>
<input type="submit" value="submit" class="submit" />
</form>

克隆的输入名称不会在提交中显示

2 个答案: