未提交表单 <select> 值

Question

我正在研究 prestashop 1.6 模块。有 3 个选项卡，每个选项卡中有 1 个表单。我合并了 3 个表单，以便通过单击 3 个提交按钮中的任何一个来提交它们。

我用的jquery：

$('.submit_general').bind('click', function () {
    $('#form1 :input').not(':submit').clone().hide().appendTo('#general');
    $('#form2 :input').not(':submit').clone().hide().appendTo('#general');
    $('#form1 select').not(':submit').clone().hide().appendTo('#general');
    $('#form2 select').not(':submit').clone().hide().appendTo('#general');
    console.log($('#form1 select').val());
    console.log($('#form2 select').val());
});
$('.submit_form1').bind('click', function () {
    $('#general :input').not(':submit').clone().hide().appendTo('#form1');
    $('#form2 :input').not(':submit').clone().hide().appendTo('#form1');
    $('#form2 select').not(':submit').clone().hide().appendTo('#form1');
});
$('.submit_form2').bind('click', function () {
    $('#general :input').not(':submit').clone().hide().appendTo('#form2');
    $('#form1 :input').not(':submit').clone().hide().appendTo('#form2');        
    $('#form1 select').not(':submit').clone().hide().appendTo('#form2');        
});

select 表格 2 和表格 3 中的元素已由 ajax 添加。

问题是当我从 "general" 选项卡 selected 提交表单时，form1 和 form2 中的元素都没有提交。此外，当我从 form1 选项卡 Form1 提交时 selected 提交的值但不是 form2 的值，反之亦然。

我通过在控制台中写入来测试 post 值。它给出了正确的结果，但没有提交，而是 select 或两个选项的第一个选项得到 posted.

HTML:

<form id="form1">
<input type="hidden" name="submitform1" value="1">              
<div class="panel" id="fieldset_form_1">                                        
    <div class="form-wrapper">                        
        <div class="form-group mailigen_form">                
            <div class="col-lg-9">                    
                <div id="list1"><div  style="padding: 7px 0px"><font color="red">No list exists</font></div></div>       
            </div>
        </div>
    </div><!-- /.form-wrapper -->
    <div class="panel-footer">
        <button type="submit" value="1" id="configuration_form_submit_btn_1" name="submitform1" class="submit_form1 btn btn-default pull-right">Save</button>
    </div>
</div>

AJAX 添加响应以代替无列表文本：

<select name="form_1" id="form_1">
<option value="1"> Test List 3</option>
<option value="2"> Test List 2</option>
<option value="3"> Test List 1</option>
</select>

Answer 1

这是因为当您克隆该元素并将其附加到另一个元素时，它会失去它的价值。您需要将选项的 selected 属性设置为 true。更好的方法是创建一个输入，将其名称设置为 select 的值，并将其值设置为 select 的值。在服务器端，你不会看到这个，所以如果你使用 input 而不是 select.

也没关系

$('#form1 select, #form2 select').each(function() {
    $("<input type='hidden' name='"+$(this).attr("name")+"' value='"+$(this).val()+"' />").appendTo('#general');
});

未提交表单 <select> 值

Forms <select> value not submitted

jquery

html

forms

prestashop-1.6