在提交时从外部表单标签向表单添加元素 - add elements to form from outside form tags on submit

add elements to form from outside form tags on submit

我有一个按价格排序的下拉菜单:从低到高等

这个菜单在我的结束表单标签之外。

如何在提交时向表单添加选择选项?

到目前为止，我有:

<script>
 $(document).ready(function(){
 $('#sort_by').change(function(){
 $("#search_form").submit();
  });
});
</script>

所以上面的代码将在更改时提交表单，但不会添加select选项的值。如何在提交时向表单添加选择选项?

选择菜单:

<select name="sort_by" id="sort_by">
<option value="Low to High">Low to High</option>
<option value="High to Low">High to Low</option>
</select>

您希望该字段在提交时成为表单的一部分，因此将select附加到表单的提交时。

添加克隆和隐藏以避免视觉变化。

$('#search_form').on('submit', function(){
    $('#sort_by').clone().hide().appendTo(this);
});

因为你是发布整个页面(不是ajax)，它不会影响你克隆选择相同的ID和不删除重复克隆事先。

编辑

问题中的文本表示希望在提交时将select添加到表单中，而给出的代码表示希望在更改时提交表单:

$('#sort_by').on('change', function(){
    $('#search_form').append($(this).clone().hide()).trigger('submit');
});

第一个解决方案是在表单中添加一个隐藏的输入字段，如下所示:

<input type="hidden" name="sort_by" id="myInput">
$('#sort_by').change(function(){
    $('#myInput').val($(this).val());
    $("#search_form").submit();
});

记得从select

中删除name属性

如果您正在使用ajax函数，您还可以构建一个FormData对象并将所有数据附加到它(docs https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects)