FormData() 对象不会从表单添加提交类型的输入，而在 Firefox 上

Question

今天我遇到了一个有趣的错误，花了很多时间才弄清楚。

设置

页面上的表单。提交时，数据被捕获并用它创建new FormData() 对象。

该对象通过 xhr 请求发送到 .php 脚本，然后返回 ok / error 消息。

代码看起来像这样：（简化版，不需要绒毛）

<form name="frm" id="frm" action="" method="post" onsubmit="save(event, this);" enctype="multipart/form-data">
    <input name="name" id="name" type="text" value="..." />
    <input name="email" id="email" type="text" value="..." />
    <input name="phone" id="phone" type="text" value="..." />
    <input name="website" id="website" type="text" value="..." />
    <textarea name="details" id="details"></textarea>
    <input name="send" type="submit" value="Send" />
</form>

<script type="text/javascript">

function save(e, frm) {

        if (document.getElementById('nume').value == '' ||
          document.getElementById('email').value == '' ||
          document.getElementById('telefon').value == '' ||
          document.getElementById('site').value == '') {

            alert('Forms empty');

        } else {

            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {

                    var r = JSON.parse(xhr.responseText);

                    if (r.code == 0) {
                        document.getElementById('message_ok').style.display = 'block';
                    } else {
                        document.getElementById('message_err').style.display = 'block';
                    }
                }
            };

            xhr.open('POST', 'http://url', true);
            var data = new FormData(frm);
            xhr.send(data);

        }
    e.preventDefault();
}

</script>

将此发送到.php 将生成一个如下所示的数组：

Array
(
    [name] => some name
    [email] => some email
    [phone] => 11111111
    [website] => some site
    [details] => some details
    [send] => Send
)

而.php 将回复{"message":"ok","code":0} 或{"message":"error","code":1}

现在这是预期的行为。这是我在 Chrome、IE 或 Safari 上得到的。

问题

然而，在 Firefox 上，我得到相同的数组，但没有 submit 输入 (name="send") 键/值对：

Array
(
    [name] => some name
    [email] => some email
    [phone] => 11111111
    [website] => some site
    [details] => some details
)

我在 Linux 和 Windows 上都试过了，以覆盖我的基础，但它仍然给出了同样不令人满意的结果。

解决方案

在网上搜索并出现空白后，我解决它的方法（更多的补丁，而不是真正解决）是覆盖send键/值：

var data = new FormData(frm);
data.append('send', 'Send');
xhr.send(data);

这是可行的，因为如果它已经定义（Chrome 等......），它会被覆盖，如果它不存在，它就会被创建。

问题

1. 类似的 - 你有没有遇到过类似的事情？
2. 修复 - 我认为我的解决方案是 hack，您有什么更好的修复方法吗？

Answer 1

根据 WHATWG 规范，FireFox 似乎是正确的。

FormData 构造函数的 XMLHttpRequest 规范说：

1. 如果给定了form，则将fd 的条目设置为constructing the form data set 的结果form。

那么在构造表单数据集的描述中，是这样说的：

在提交者submitter 的上下文中form 可选地构造表单数据集 的算法如下。如果没有另外指定，提交者为空。

表单中的按钮只有在提交者的情况下才会包含在表单数据集中。但是当这个算法从FormData构造函数中执行时，没有指定提交者，所以表单数据集中不应该包含任何按钮。

Answer 2

在 Chrome 58 中遇到类似情况。

在我的问题中，有多个提交按钮，我需要知道选择了哪一个，或者至少知道是否选择了一个特定的按钮。

我可怕的 hack 是显式监听该按钮被选中，创建一个隐藏的输入并将其插入到提交按钮之前。

更新：改进的黑客攻击

监听提交按钮的点击，并通过按钮作为提交者发送到 on('submit')，并在 ajax 调用中使用之前附加到 FormData 对象。

根据输入[type="submit"] 进行修改，并可能对submitter 的内容进行额外的错误检查。

$('#defaultModalObject-1').on('click', 'button[type="submit"]', function(event) {
    /* horrible hack to detect wizard_goto_step submissions via ajax */
    event.preventDefault();
    $(event.target.form).trigger('submit', event.target);
});

$('#defaultModalObject-1').on('submit', 'form', function(event, submitter){
    ...
    var formdata = new FormData(form[0]);

    if (submitter != undefined) {
        formdata.append(submitter.name, submitter.value);
    }
    ...
});

---

原始黑客

$('#ajax_form_modal_result').on('click', 'button[type="submit"][name="wizard_goto_step"]', function(event) {
    /* horrible hack to detect wizard_goto_step submissions via ajax */
    event.preventDefault();
    var input = $('input[type="hidden"]').attr('name', 'wizard_goto_step').val(event.target.value);
    $(event.target).before(input);
    $(event.target.form).trigger('submit');
});

很遗憾，我的委托表单处理程序 $('#defaultModalObject-1').on('submit', 'form', function(event) { ... }); 上没有创建者信息

Answer 3

我们在 linux 客户端上遇到同样的问题，使用下面的代码将所有按钮元素添加到我们的表单数据中。

第一个问题是在某些代码中获取表单数据时出错

if($this.is('form'))
{
  var fd = new FormData($this.get(0));
}
else
{
  var fd = new FormData();
}

第二个问题类似于以 ajax 形式添加按钮的问题。有时我们在一个表单中有多个按钮，并且想要检测按下了哪个按钮。

$this.find('button').each(function()
{
  fd.append(this.getAttribute('name'), this.value);
});

如果有人需要使用输入类型提交可以添加上面的代码，我们在这种情况下使用按钮:)