Formular im Hintergrund mit Ajax absenden

Question

Ich möchte ein Formular im Hintergrund absenden mit Ajax. Hier ist mein Formular

<div id="form-container">
    <form id="the-form" action="comment.php">
        <ul>
            <li><label>first name:</label> <input name="firstname" type="text" value="Jane" /></li>
            <li><label>last name:</label> <input name="lastname" type="text" value="Doe" /></li>
        </ul>    
        <button onclick="absenden()">submit</button>
    </form>   
</div>

Ich habe eine kleine Javascript Funktion die das Form absendet.

function absenden() {
    var form = document.getElementById("the-form");
    form.submit();
}

aber die Seite ladet dann trotzdem komplett neu und die Eingabefelder stehen alle in der Adresszeile. Wie kann ich das Formular im Hintergrund absenden mit Ajax?

Answer 1

Du kannst die Eingaben aus dem Formular lesen und mit einem XMLHttpRequest einen POST Request im Hintergrund absenden.

<div id="form-container">
    <form id="the-form" action="comment.php">
        <ul>
            <li><label>first name:</label> <input name="firstname" type="text" value="Jane" /></li>
            <li><label>last name:</label> <input name="lastname" type="text" value="Doe" /></li>
        </ul>    
        <button type="button" onclick="absenden()">submit</button>
    </form>   
</div>

<script>
function absenden() {
    var form = document.getElementById("the-form");
    var formData = new FormData(form);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "comment.php", true);

    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            // Erfolgreiche Antwort vom Server
            console.log(xhr.responseText);
        } 
    };

    xhr.onerror = function () {
        // Es gab einen Fehler bei der Anfrage
        console.error(xhr.statusText);
    };

    xhr.send(formData);
}
</script>