在提交时从外部表单标签向表单添加元素答案

【问题标题】：add elements to form from outside form tags on submit在提交时从外部表单标签向表单添加元素
【发布时间】：2015-07-21 12:16:35
【问题描述】：

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

此菜单在我的结束表单标记之外。

如何在提交时将选择选项添加到表单中？

到目前为止我有：

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

所以上面将提交更改的表单，但不会添加选择选项的值。如何在提交时将选择选项添加到表单中？

选择菜单：

<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>

【问题讨论】：

为什么不完全删除表单并简单地通过 ajax 提交？
@SexyTurnip 类似的问题，但答案是香草 javascript。 OP 已请求 jQuery，但他们并未要求在选择更改时提交表单。
这就是我没有投票关闭的原因。然而，无论是否使用框架，概念都是相同的，因此共享链接。
@Popnoodles Vanilla JS 是没有包装器的 jQuery，您在处理 jQuery 时也可以使用它。原版 JS 的恐惧从何而来？
@feela 不相关。你会因为 hiphop 把 php 编译成 C++ 就用 C++ 给别人一个 PHP 答案吗？

标签： php jquery html forms

【解决方案1】：

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

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

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

由于您发布的是整个页面（不是 ajax），因此您可以使用相同的 ID 克隆选择并且不要事先删除重复的克隆。

编辑

虽然问题中的文本表示您希望在提交时将选择添加到表单中，但给出的代码表示您希望在更改时提交表单：

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

【讨论】：

在视觉上最好hide附加字段$('#sort_by').appendTo(this).hide()
可能值得隐藏。
这很好用，唯一的问题是当我从选择菜单中选择一个选项时，选择框在附加到表单时消失，然后在我看到结果时又回来
在这种情况下使用.clone()。更新了答案。
@user3312792 这是一个更整洁的解决方案，不需要您添加不必要的 HTML，并且应该（为了他人的利益）是公认的答案。

【解决方案2】：

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

<input type="hidden" name="sort_by" id="myInput">

$('#sort_by').change(function(){
    $('#myInput').val($(this).val());
    $("#search_form").submit();
});

记得从 select 中删除 name 属性

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

【讨论】：

OP 没有要求在更改选择时提交表单，他们要求在提交表单时将字段添加到表单中。
@Popnoodles 好吧，如果您看起来它已经在选择下拉列表时被提交。他没有改变这一点
@Vanojx1 啊，是的，我明白了。问题中的文字另有说明，因此需要OP澄清。
这很好，因为它在提交表单时不会影响选择框