1

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.

astorije
  • 2,666
  • 2
  • 27
  • 39
  • That seems like a pretty efficient way to do it. What do you want to do with it that that doesn't do the job? – ElendilTheTall Jan 26 '14 at 18:23
  • I was hoping that I could use some kind of `e.target.generatedQueryStringForTheWin` :) Since the browser already does the job for me at some point, I am a little bit uncomfortable to redo it myself. There could always be security or encoding issues, for example (I am actually using `encodeURIComponent` but didn't want to pollute the example). – astorije Jan 26 '14 at 18:28
  • possible duplicate of [How to build query string with Javascript](http://stackoverflow.com/questions/316781/how-to-build-query-string-with-javascript) – Jocelyn delalande Jan 28 '14 at 23:58
  • Maybe, but I was hoping that things had changed in 5 years :) – astorije Jan 29 '14 at 00:22

2 Answers2

2

I don't think so. To generate request you have to submit.

Thrash Bean
  • 658
  • 4
  • 7
0

If I understand you correctly you can use the serialize function in jQuery to work with the form input element for querystrings or form submissions:

$('body').on('submit', 'form', function(evt) {
   evt.preventDefault();
   alert($(this).serialize());
   //redirect to another url with querystring window.location = '?' + $(this).serialize();
   //or you can do a submit $(this).submit();
});

Here is a FIDDLE: http://jsfiddle.net/mikea80/kfSM7/

mikea80
  • 127
  • 1
  • 5
  • 1
    I am only using {Vanilla JS](http://vanilla-js.com/) for this project, so I was looking for a buit-in way to do that. I will look at the `.serialize()` source code though, that might be interesting. – astorije Jan 26 '14 at 18:33
  • I added a fiddle so you can play with it and see if it works. Basically the serialize function loops through the input element with a "name" attribute and collects the values – mikea80 Jan 26 '14 at 18:40
  • Yes, but again... I am not using jQuery on this project, only pure JavaScript (hence my link to [Vanilla JS](http://vanilla-js.com/) and its ugly typo in my prevous comment...) – astorije Jan 26 '14 at 19:06