FormData() object does not add submit-type inputs from form, while on Firefox
<p>Today I came across an interesting bug, which took a good chunk of time to get to the bottom of.</p>

<h2>The setup</h2>

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

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

<p>The code looks something like this: (<em>simplified version, no need for fluff</em>)</p>

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

&lt;script type="text/javascript"&gt;

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

&lt;/script&gt;
</code></pre>

<p>Sending this to <code>.php</code> will result in an array which kind of looks like this:</p>

<pre><code>Array
(
    [name] =&gt; some name
    [email] =&gt; some email
    [phone] =&gt; 11111111
    [website] =&gt; some site
    [details] =&gt; some details
    [send] =&gt; Send
)
</code></pre>

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

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

<h2>The problem</h2>

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

<pre><code>Array
(
    [name] =&gt; some name
    [email] =&gt; some email
    [phone] =&gt; 11111111
    [website] =&gt; some site
    [details] =&gt; some details
)
</code></pre>

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

<h2>Solution</h2>

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

<pre><code>var data = new FormData(frm);
data.append('send', 'Send');
xhr.send(data);
</code></pre>

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

<h2>Questions</h2>

<ol>
<li><strong>Similar</strong> - Have you ever faced something similar?</li>
<li><strong>Fix</strong> - I consider my solution a hack, have you got any ideas for a better fix?</li>
</ol>