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(true);。在进行克隆时，只会克隆表单和关联控件，但值将被清空。通过＆＃34; true＆＃34;作为克隆的参数，控件内的值也将被克隆。

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

在发送表单时插入新元素以形成导致问题（空数据）

1 个答案: