Obecne ustawienia

Mam taki formularz HTML.

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

Mogę mieć wiele z tych formularzy na stronie.

Moje pytanie

Jak przesłać ten formularz asynchronicznie, a nie zostać przekierowany lub odświeżyć stronę? Wiem, jak używaćXMLHttpRequest. Problem, który mam, polega na pobieraniu danych z kodu HTML w javascript, a następnie umieszczaniu ich w łańcuchu post-post. Oto metoda, której obecnie używam dla mojego zXMLHttpRequest`'s.

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");
}

Na przykład powiedz metodę javascriptdemoRequest() został wywołany po kliknięciu przycisku przesyłania formularza, w jaki sposób uzyskać dostęp do wartości formularza z tej metody, a następnie dodać go doXMLHttpRequest?

EDYTOWAĆ

Próbując zaimplementować rozwiązanie z poniższej odpowiedzi, zmodyfikowałem swój formularz w ten sposób.

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

Jednak po kliknięciu przycisku nadal próbuje mnie przekierować (do miejsca, w którym nie jestem pewien), a moja metoda nie jest wywoływana?

Odsłuch zdarzeń przycisku

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

                                // Do something
                                updateProperties();

                                return false;
                            });