Link button with data in url

Question

I would like to make a button link to another page. Furthermore, I would like to include some data in the url. The onclick method works, but I was trying to do it without JavaScript. The form submit method almost works, but does not send the data (id1 and id2). Any suggestions? Is it best to use JavaScript? Thank you

<input type="button" value="Clickable Button - onclick" onclick="window.location.href='http://www.google.com?id1=123&amp;id2=345'" />

<form action="http://www.google.com?id1=123&amp;id2=345"><input type="submit" value="Clickable Button - Submit" /></form>

Can you not just build the URI string in the link? Is this user submitted data? <a href="whatever.com?id=foo&something=bar">click me</a> — rlemon
– rlemon, Commented May 11, 2012 at 12:24

antyrat · Accepted Answer · 2012-05-11 12:16:05Z

4

You need to add some hidden fields to your <form>:

<form action="http://www.google.com">
    <input type="hidden" name="id1" value="123" />
    <input type="hidden" name="id2" value="345" />
    <input type="submit" value="Clickable Button - Submit" />
</form>

answered May 11, 2012 at 12:16

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

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

3 Comments

pXel Over a year ago

Use <form action='google.com' method="get"> to force the properties to be written as url parameters. The alternative method="post" will still send the properties, but they will be hidden from the url.

rlemon Over a year ago

GET is default for FORMS without methods iirc.

pXel Over a year ago

That may not be true, depending on third party frameworks/taglibs, or maybe some browsers. For example for Struts default method is post. People may want to check this if they want to make sure their url is mandatory to be formed in a specific format. Also some servers may ignore requests if they are not sent with the expected method.

gopi1410 · Accepted Answer · 2012-05-11 12:25:02Z

2

Below is a non-js solution:

 <form method="get" action="http://www.google.com">
    <input type="hidden" name="id1" value="123" />
    <input type="hidden" name="id2" value="345" />
    <input type="submit" value="Clickable Button - Submit" />
 </form>

edited May 11, 2012 at 12:25

answered May 11, 2012 at 12:17

gopi1410

6,65110 gold badges44 silver badges76 bronze badges

2 Comments

rlemon Over a year ago

How would using Javascript be better? Using Javascript for this would actually limit your site to JS enabled browsers only. Using Javascript for this IS NOT RECOMMENDED if there is a native way in HTML.

rlemon Over a year ago

it's a small percentage... but sites should implore progressive enhancements and not limit their audience by not allowing things to function. First; make it function without js/css, next; make it look bauce with css and js enhancements.

Jukka K. Korpela · Accepted Answer · 2012-05-11 12:18:59Z

1

<form action="http://www.google.com">
<input type="submit" value="Clickable Button - Submit" />
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
</form>

A better alternative, though, is to use a normal link and use CSS to style it look like a button if necessary. Links Want To Be Links.

answered May 11, 2012 at 12:18

Jukka K. Korpela

203k38 gold badges282 silver badges408 bronze badges

Collectives™ on Stack Overflow

Link button with data in url

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related