在Firefox上，FormData()对象不会从表单添加提交类型的输入 [英] FormData() object does not add submit-type inputs from form, while on Firefox

问题描述

今天，我遇到了一个有趣的错误，该错误花了很多时间才能找到根源.

Today I came across an interesting bug, which took a good chunk of time to get to the bottom of.

页面上的表单.提交后，将捕获数据并使用它创建new FormData()对象.

A form on a page. On submit, the data gets captured and new FormData() object gets created with it.

该对象随xhr请求一起发送给.php脚本，然后该脚本返回ok/error消息.

That object gets sent with and xhr request to an .php script, which then returns an ok / error message.

代码看起来像这样:(简化版本，不需要绒毛)

The code looks something like this: (simplified version, no need for fluff)

<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将产生一个看起来像这样的数组:

Sending this to .php will result in an array which kind of looks like this:

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上获得的东西.

Now this is the expected behavior. This is what I get on either Chrome, IE or Safari.

但是在Firefox上，除了没有submit输入(name="send")键/值对之外，我得到的数组相同:

On Firefox however, I get the same array except without the submit input (name="send") key/value pair:

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

我尝试在Linux和Windows上都可以满足我的要求，但仍然给出了同样令人不满意的结果.

I tried on both Linux and Windows, to cover my basis, yet it still gave the same unsatisfying result.

在线搜索并显示为空后，我解决它的方法(更多修补工作，而不是真正解决问题)是覆盖send键/值:

After searching online and coming up empty, the way I solved it (more of patching, not really solving) was to overwrite the send key/value:

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

之所以可行，是因为如果已经定义(例如Chrome，Chrome等... )，它将被覆盖；如果不存在，则会创建它.

This works, because if it's already defined (Chrome, etc...) it gets overwritten, if it doesn't exist, it gets created.

1. 类似-您是否遇到过类似的事情?
2. 修复-我认为我的解决方案是黑客，您有更好的解决方案的想法吗?

1. Similar - Have you ever faced something similar?
2. Fix - I consider my solution a hack, have you got any ideas for a better fix?

根据WHATWG规范，

推荐答案

FireFox似乎是正确的.

FireFox seems to be correct, according to the WHATWG specification.

FormData 构造函数的XMLHttpRequest规范说:

The XMLHttpRequest specification of the FormData constructor says:

1. 如果给出了form，则将fd的条目设置为构建 form的表单数据集.

1. If form is given, set fd's entries to the result of constructing the form data set for form.

然后在构造表单数据集的描述中说:

Then in the description of constructing the form data set, it says:

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

The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.

如果表单中的按钮是提交者，则仅包含在表单数据集中.但是，当从FormData构造函数执行此算法时，没有指定提交者，因此表单数据集中不应包含任何按钮.

A button in the form is only included in the form data set if it's the submitter. But when this algorithm is executed from the FormData constructor, no submitter is specified, so no buttons should be included in the form data set.

这篇关于在Firefox上，FormData()对象不会从表单添加提交类型的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！