javascript - How to pass input field values as a url query string that will be opened on click of a submit button? -

i have input fields this

 <form>     <input type="text" id="keyword" placeholder="xxx">     <input type="text" id="state" placeholder="xxx">     <button type="submit" id="submit">submit</button>  </form> 

on click of submit send them new page value of input appended url query string.

 http://www.link.com/page?keyword=xyxyx&state=xzxx 

here start thinking thinking .serialize() can handle better example

  var keywordval = $("#keyword").val();   var stateval = $("#state").val();    $( "form" ).on( "submit", function() {    event.preventdefault();    location.href='http://www.link.com/page?keyword=' + keywordval + '&state=' + stateval   }); 

let me know if approaching right way..

you don't need javascript this.

simply add action attribute url , set method attribute get (this append named field values query string).

<form action="<yoururl>" method="get">     <input type="text" id="keyword" name="keyword" placeholder="xxx">     <input type="text" id="state" name="state" placeholder="xxx">     <button type="submit" id="submit">submit</button> </form> 

note: you'll need name attributes on fields.

fiddle: http://jsfiddle.net/pjh7wkj4/