XMLHttpRequest для публикации формы HTML

Текущая настройка

У меня есть форма HTML, как это.


   
   Update

У меня может быть много таких форм на странице.

Мой вопрос

Как я могу отправить эту форму асинхронно и не перенаправить или обновить страницу? Я умею пользоватьсяXMLHttpRequest, У меня есть проблема получения данных из HTML в javascript, чтобы затем поместить в строку запроса поста. Вот метод, который яв настоящее время использую для моего 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");
}

Так, например, скажем, метод JavaScriptdemoRequest() был вызван, когда формаНажата кнопка «Отправить», как получить доступ к форме?Значения из этого метода, чтобы затем добавить его в?XMLHttpRequest

РЕДАКТИРОВАТЬ

Пытаясь реализовать решение из ответа ниже, я изменил свою форму следующим образом.


       
       Update

Однако при нажатии на кнопку, это 'все еще пытается перенаправить меня (туда, где яя не уверен) и мой метод неТ называется?

Слушатель событий кнопки

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

                                // Do something
                                updateProperties();

                                return false;
                            });

Ответы на вопрос(6)

Ваш ответ на вопрос