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

Question

I would have to input fields like 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 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.

 http://www.link.com/page?keyword=XYXYX&state=XZXX

Here is my start thinking but was thinking .serialize() can handle this better than this 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 i am approaching it the right way..

Add method="get", action="page" and a target attribute to your form, and you don’t need JavaScript … (and will therefor be much less likely to get caught in any popup blocker.) — C3roe
– C3roe, Commented May 14, 2015 at 15:49

Kevin Boucher · Accepted Answer · 2015-05-15 02:48:28Z

16

You don't need JavaScript to do this.

Simply add an action attribute with the URL and set the method attribute to GET (this will append the named field values as a 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 your fields.

Fiddle: http://jsfiddle.net/pjh7wkj4/

edited May 15, 2015 at 2:48

answered May 14, 2015 at 15:39

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

slayernoah Over a year ago

Is there any way to pass a URL parameter to test on a fiddle?

Manjunatha Thippeswamy · Accepted Answer · 2015-05-14 15:52:05Z

3

No need any jQuery/javascript to do that, form tag is providing those functionality. Adding action and method (GET) attributes will give you the results what you expect.

<form action="<target_url>" 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>

edited May 14, 2015 at 15:52

answered May 14, 2015 at 15:48

Manjunatha Thippeswamy

1261 silver badge4 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related