as Objekt @FormData () fügt keine Eingaben vom Typ "Senden" aus dem Formular hinzu, während in Firefox

Heute bin ich auf einen interessanten Fehler gestoßen, der eine Menge Zeit in Anspruch nahm, um auf den Grund zu gehen.

Die Einrichtun

Ein Formular auf einer Seite. Beim Absenden werden die Daten erfasst undnew FormData() Objekt wird damit erstellt.

Das Objekt wird mit und @ gesendxhr Anfrage an ein.php script, das dann ein @ zurückgiok / error Botschaft

Der Code sieht ungefähr so aus: vereinfachte Version, keine Notwendigkeit für Flusen)

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

Senden Sie dies an.php ergibt ein Array, das ungefähr so aussieht:

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

und.php antwortet entweder mit{"message":"ok","code":0} oder{"message":"error","code":1}

Now das ist das erwartete Verhalten. Dies ist, was ich entweder auf Chrome, IE oder Safari bekomme.

Das Proble

ei Firefox erhalte ich jedoch das gleiche Array, außer ohne dassubmit input name="send") Schlüssel / Wert-Paar:

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

Ich habe sowohl unter Linux als auch unter Windows versucht, meine Basis zu decken, aber es ergab immer noch das gleiche unbefriedigende Ergebnis.

Lösun

Nachdem ich online gesucht habe und leer bin, wie ich es gelöst habe mehr Patchen, nicht wirklich lösen) sollte das @ überschreibsend Schlüsselwert

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

Dies funktioniert, denn wenn es bereits definiert ist Chrome, etc ...) es wird überschrieben, wenn es nicht existiert, wird es erzeugt.

FrageÄhnlic - Hast du jemals mit etwas Ähnlichem konfrontiert?Fi - Ich betrachte meine Lösung als Hack. Haben Sie Ideen für eine bessere Lösung?

Antworten auf die Frage(6)

Ihre Antwort auf die Frage