javascript - 发送表单时向表单插入新元素会导致问题(空数据)

Question

我必须在我的网站上填写表格，当填写第二个表格时(单击“保存”按钮后)，我会复制此表格并将其插入到第一个表格中。不幸的是，当我提交此表单时，插入的元素中的数据为空。

我的代码:

 var objToCopy = $('.partnersForm').find('.modal-body').clone();

     objToCopy.find('[name]').each(function(){
                    var objThs = $(this);
                    objThs.prop('name', '_' + objThs.prop('name'));
                    objThs.prop('id', '_' + objThs.prop('id'));
                });
     $('.partnersData').html(objToCopy);

数据如下所示:

        [contact_county] => Hampshire
        [country] => GB
        [contact_title] => 4
        [contact_name] => gfhf
        [contact_surname] => fghfgh
        [_partner_mobile] => 
        [_partner_nationality] => 
        [_partner_dob] => 
        [_partner_email] => 

其中空数据来自插入的元素。 当我在插入后手动删除第二个表单时，一切似乎都正常。 但我不明白为什么即使更改输入名称也无法发送此数据。

简化的 HTML 结构:

<form id="form1">
    <input type="text" name="contact_county" id="contact_county">
    <input name="country" id="country">
    <input name="contact_title" id="contact_title">
    <input name="contact_name" id="contact_name">
    <input name="contact_surname" id="contact_surname">
    <div class="partnersData" id="partnersData">
        <!-- inserted elements goes here -->
    </div>
    <button type="submit">Submit</button>
</form>
<form class="partnersForm" id="form2">
    <div class="modal-body">
        <input type="text" name="partner_mobile" id="partner_mobile">
        <input type="text" name="partner_nationality" id="partner_nationality">
        <input type="text" name="partner_dob" id="partner_dob">
        <input type="text" name="partner_email" id="partner_email">  
    </div>
    <div class="modal-foter">
        <a href="#" class="copyElements">Save</a>
    </div>
</form>

Answer 1

您应该使用 $('.partnersForm').find('.modal-body').clone(); 而不是 $('.partnersForm').find('.modal-body').clone(); ('.modal-body').clone(true);。当您进行克隆时，只有表单和关联的控件被克隆，但值被清空。将“true”作为参数传递给克隆，控件内的值也将被克隆。

有关详细信息，请查看 JQuery 文档 clone() .