Hoy me encontré con un error interesante, que me llevó bastante tiempo llegar al fondo.

La puesta en marcha

Un formulario en una página. Al enviar, los datos se capturan ynew FormData() El objeto se crea con él.

Ese objeto se envía con yxhr solicitud a un.php script, que luego devuelve unok / error mensaje.

El código se parece a esto: (versión simplificada, sin necesidad de pelusa)

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

Enviando esto a.php dará como resultado una matriz que se ve así:

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

y.php responderá con cualquiera{"message":"ok","code":0} o{"message":"error","code":1}

Ahora este es el comportamiento esperado. Esto es lo que obtengo en Chrome, IE o Safari.

El problema

Sin embargo, en Firefox, obtengo la misma matriz, excepto sin elsubmit entrada (name="send") par clave / valor:

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

Intenté tanto en Linux como en Windows, para cubrir mi base, pero aún así dio el mismo resultado insatisfactorio.

Solución

Después de buscar en línea y salir vacío, la forma en que lo resolví (más parches, no realmente resolviendo) fue sobreescribir elsend valor clave:

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

Esto funciona, porque si ya está definido (Chrome, etc.) se sobrescribe, si no existe, se crea.

PreguntasSimilar - ¿Alguna vez has enfrentado algo similar?Reparar - Considero que mi solución es un truco, ¿tienes alguna idea para una solución mejor?