Considering the following piece of HTML markup:
<form method="GET">
<input type="text" name="a" value="one">
<input type="text" name="b" value="two">
<input type="text" name="c" value="three">
<input type="submit">
</form>
Without JS on top of it, it will naturally load the action page (self, in this case) with the query string ?a=one&b=two&c=three
.
However, I don't want the action page to be loaded and prevent this with some JS:
document.querySelector("form").addEventListener("submit", function(e) {
// Do some stuff
e.preventDefault();
});
The problem now is that the query string is not generated and I have to manually compute it with the following:
var queryString = "?" + [].map.call(document.querySelectorAll("input[type=text]"), function(element) {
return element.name + "=" + element.value;
}).join("&");
console.log(queryString); // Displays "?a=one&b=two&c=three"
Is there a way I can avoid this and get the query string that was supposed to be sent to the action page anyway?
EDIT: I am working in pure JavaScript, I am not looking for a solution involving jQuery or other JS frameworks.