如何在提交之前将元素添加到表单数据？答案

【问题标题】：How do I add an element to form data before submitting it?如何在提交之前将元素添加到表单数据？
【发布时间】：2014-05-20 04:59:59
【问题描述】：

注意：这是一个关于 Javascript 和 HTML 表单的非常具体的问题。我已经搜索并找不到这个特定问题的答案，它涉及 Dojo 框架，并且不涉及 JQuery。请不要将此标记为 JQuery 问题的“重复”，因为它不涉及 JQuery。

我需要通过单击“按钮”类型的按钮而不是“提交”类型的按钮来提交表单。但是，我还需要包含被点击的按钮的名称，在这些情况下通常不会提交。这种变化的原因（从原来的“提交”功能）是因为这个动态表单上可以有十几个按钮，如果它们都是“提交”按钮，用户将按“输入”移动到下一个字段，并且当表单执行意外（如提交）而不是移动到下一个字段时会感到困惑。

我想出的方法是将所有button type='submit' 标记更改为button type='button' 控件。然后我添加了这个小的 Javascript 片段（我们使用 Dojo 库，所以这是 Dojo 语法）：

query("button[type='button']").on("click",function(e) {
    dom.byId("myform").submit();
}

这可行，但在服务器端，它没有被正确处理。当按下提交按钮时，表单数据（由 Chrome 解析）如下所示：

myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields

最后一行是按钮名称和 ID。使用上面的 Javascript 提交表单时，缺少最后一行：

myInput1: 1
myInput2: Some Data

我需要在提交之前将最后一个元素添加到表单数据中。

我已经搜索过此信息，但不幸的是所有existing examples 都使用Jquery，在这种情况下我无法使用。如何使用 Dojo 或常规 Javascript 将此信息添加到表单数据？

【问题讨论】：

为什么不在上述点击事件处理程序中将按钮值属性设置为隐藏的表单字段元素？
@Pawal - 不幸的是，我在服务器端也没有太多选择，因为我们使用的是 Spring Web Flow。表单值必须以非常特定的方式进入服务器，否则 Web Flow 的东西不会使用它们。我们几乎把自己写进了一个角落。 :(
@Pawal - 我重新阅读了您的答案，实际上它是正确的。神奇的是，我需要将隐藏字段创建为不同类型的输入而不是按钮，以便将其添加为我猜的“新字段”。如果您想在下面发布答案，我会将其标记为正确。
顺其自然。很高兴它对你有用。 :D

标签： javascript html forms dojo

【解决方案1】：

您可以在提交时将按钮元素添加到表单中，或者创建一个隐藏的输入元素并将其添加到表单中

var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();

【讨论】：