title: How to pass input field values as a url query string that will be opened on click of a submit button?
body: <p>I would have to input fields like this</p>
  
  <pre><code> &lt;form&gt;
      &lt;input type="text" id="keyword" placeholder="XXX"&gt;
      &lt;input type="text" id="state" placeholder="XXX"&gt;
      &lt;button type="submit" id="submit"&gt;Submit&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>On click of the submit I would like to send them to a new page with the value of the input appended to the url with query string. </p>
  
  <pre><code> http://www.link.com/page?keyword=XYXYX&amp;state=XZXX
  </code></pre>
  
  <p>Here is my start thinking but was thinking <code>.serialize()</code> can handle this better than this <a href="https://stackoverflow.com/questions/8387494/pass-inputbox-value-as-a-querystring-to-url">example</a></p>
  
  <pre><code>  var keywordVal = $("#keyword").val();
    var stateVal = $("#state").val();
  
    $( "form" ).on( "submit", function() {
     event.preventDefault();
     location.href='http://www.link.com/page?keyword=' + keywordVal + '&amp;state=' + stateVal
    });
  </code></pre>
  
  <p>let me know if i am approaching it the right way.. </p>