Текущая настройка
У меня есть форма 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>
У меня может быть много таких форм на странице.
Мой вопрос
Как я могу отправить эту форму асинхронно и не перенаправить или обновить страницу? Я знаю, как использовать XMLHttpRequest. У меня есть проблема получения данных из HTML в javascript, чтобы затем поместить в строку запроса поста. Вот метод, который я в настоящее время использую для моих zXMLHttpRequest.
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");
}
Например, если при нажатии кнопки отправки формы был вызван метод javascript demoRequest(), как мне получить доступ к значениям формы из этого метода, чтобы затем добавить его в XMLHttpRequest?
РЕДАКТИРОВАТЬ
Пытаясь реализовать решение из ответа ниже, я изменил свою форму следующим образом.
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
Тем не менее, при нажатии на кнопку, он все еще пытается перенаправить меня (туда, где я не уверен), и мой метод не вызывается?
Слушатель событий кнопки
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});