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

问题描述

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

设置

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

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

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

将其发送到 .php 将产生一个如下所示的数组:

数组([名称] =>一些名字[电子邮件] =>一些电子邮件[电话] =>11111111[网站] =>一些网站[详情] =>一些细节[发送] =>发送)

和 .php 将响应 {"message":"ok","code":0} 或 {"message":"error","代码":1}

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

问题

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

数组([名称] =>一些名字[电子邮件] =>一些电子邮件[电话] =>11111111[网站] =>一些网站[详情] =>一些细节)

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

解决方案

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

var data = new FormData(frm);data.append('发送', '发送');xhr.send(数据);

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

问题

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

解决方案

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

FormDataXMLHttpRequest 规范> 构造函数说:

<块引用>

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

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

<块引用>

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

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

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

The setup

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

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>

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
)

and .php will respond with either {"message":"ok","code":0} or {"message":"error","code":1}

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

The problem

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
)

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

Solution

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

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

Questions

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?

解决方案

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

The XMLHttpRequest specification of the FormData constructor says:

2. 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:

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.

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.

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