Aktuelles Setup

Ich habe so ein HTML-Formular.

<form id="demo-form" action="POST" method="post-handler.php">
   <input type="text" name="name" value="previousValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

Ich kann viele dieser Formulare auf einer Seite haben.

Meine Frage

Wie reiche ich dieses Formular asynchron ein und lasse mich nicht umleiten oder die Seite aktualisieren? Ich weiß, wie man es benutztXMLHttpRequest. Das Problem, das ich habe, ist das Abrufen der Daten aus dem HTML-Code in Javascript, um sie dann in eine Post-Request-Zeichenfolge einzufügen. Hier ist die Methode, die ich derzeit für meine zXMLHttpRequest-Anforderungen verwende.

function getHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}

function demoRequest() {
       var request = getHttpRequest();
       request.onreadystatechange=function() {
             if (request.readyState == 4 && request.status == 200) {
                   console.log("Response Received");
             }
       }
       request.open("POST","post-handler.php",true);
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("action=dosomething");
}

Sagen Sie zum Beispiel die JavaScript-MethodedemoRequest() wurde aufgerufen, als auf die Senden-Schaltfläche des Formulars geklickt wurde. Wie greife ich mit dieser Methode auf die Werte des Formulars zu, um sie dann zum Formular hinzuzufügen?XMLHttpRequest?

BEARBEITEN

Beim Versuch, eine Lösung aus der folgenden Antwort zu implementieren, habe ich mein Formular wie folgt geändert.

<form id="demo-form">
       <input type="text" name="name" value="previousValue"/>
       <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>

Wenn Sie jedoch auf die Schaltfläche klicken, wird weiterhin versucht, mich umzuleiten (dorthin, wo ich nicht sicher bin), und meine Methode wird nicht aufgerufen.

Button Ereignis-Listener

document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                evt.preventDefault();

                                // Do something
                                updateProperties();

                                return false;
                            });