O objeto FormData () não adiciona entradas do tipo envio do formulário, enquanto no Firefox
Hoje me deparei com um bug interessante, que demorou um bom tempo para chegar ao fundo.
A configuraçãoUm formulário em uma página. Ao enviar, os dados são capturados enew FormData()
objeto é criado com ele.
Esse objeto é enviado com exhr
pedido a um.php
script, que retorna umok
/ error
mensagem.
O código se parece com isso: (versão simplificada, sem necessidade de cotão)
<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 isso para.php
resultará em uma matriz que se parece com isso:
Array
(
[name] => some name
[email] => some email
[phone] => 11111111
[website] => some site
[details] => some details
[send] => Send
)
e.php
responderá com{"message":"ok","code":0}
ou{"message":"error","code":1}
Agora este é o comportamento esperado. É isso que recebo no Chrome, IE ou Safari.
O problemaNo Firefox, no entanto, recebo a mesma matriz, exceto sem osubmit
entrada (name="send"
) par chave / valor:
Array
(
[name] => some name
[email] => some email
[phone] => 11111111
[website] => some site
[details] => some details
)
Eu tentei no Linux e no Windows, para cobrir minha base, mas ainda assim deu o mesmo resultado insatisfatório.
SoluçãoDepois de pesquisar on-line e ficar vazio, a maneira como o resolvi (mais remendos, realmente não resolvendo) foi substituir osend
valor chave:
var data = new FormData(frm);
data.append('send', 'Send');
xhr.send(data);
Isso funciona, porque se já estiver definido (Chrome, etc ...) é substituído, se não existir, será criado.
QuestõesSemelhante - Você já enfrentou algo semelhante?Consertar - Considero minha solução um hack, você tem alguma idéia para uma solução melhor?