title: How to hijack html form input and accurately convert the data for use in ajax requests?
body: <p>In this example I use a simple form, although in reality the form is much more complex. What I want to do is to prevent the form from submitting, and gather the data it was about to submit to use in an ajax request later.</p>
  
  <pre><code>&lt;form action="#" method="post" id="myform"&gt;
  &lt;input name="string_input" value="default"/&gt;
  &lt;input type="submit" value="submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So far I have figured out that I can easily stop form submission with an on submit listener, and it also returns an event value with lots of data in it. </p>
  
  <pre><code>document.getElementById('myform').onsubmit = function(e) {
      console.log(e);
      return false;
  };
  </code></pre>
  
  <p>But I'm not very sure how to convert that event data into json format for my ajax request.</p>
  
  <p>Is there a simple way of doing this? Perhaps there is some function for this?</p>