El objeto FormData () no agrega entradas de tipo envío desde el formulario, mientras está en Firefox
Hoy me encontré con un error interesante, que me llevó bastante tiempo llegar al fondo.
La puesta en marchaUn 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 problemaSin 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ónDespué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?