Menu
How do I make a <input type=button> act like a hyperlink and redirect using a GET request?
721
Using onclick Event: The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page into the given location. Using button tag inside <a> tag: This method create a button inside anchor tag.
To create a button link to another page in HTML,just add <a> tag and wrap it around the simple Html button. Inside a <a> tag simply use href=“” attribute to give the path of the desired page.
You can make <button> tag to do action like this:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
or:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
It's simple and no javascript required!
NOTE:
This approach is not valid from HTML structure. But, it works on many modern browser. See following reference :
- For
<button>; and- For
<input type="button />
142
There are several different ways to do that -- first, simply put it inside a form that points to where you want it to go:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
This has the advantage of working even without javascript turned on.
Second, use a stand-alone button with javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This however, will fail in browsers without JavaScript (Note: this is really bad practice -- you should be using event handlers, not inline code like this -- this is just the simplest way of illustrating the kind of thing I'm talking about.)
The third option is to style an actual link like a button:
<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
<a href="/my/link/location/">Go to my link location</a>
</div>
This has the advantage of working everywhere and meaning what you most likely want it to mean.
41
<script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
Here's the other way, it's simpler than the other one.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It's simpler.
24
For those who stumble upon this from a search (Google) and are trying to translate to .NET and MVC code. (as in my case)
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will show a button labeled "Process" and take you to "/Process/RemoveLostRolls". Without "FormMethod.Get" it worked, but was seen as a "post".
29
Do not do it. I might want to run my car on monkey blood. I have my reasons, but sometimes it's better to stick with using things the way they were designed even if it doesn't "absolutely perfectly" match the exact look you are driving for.
To back up my argument I submit the following.
onclick="location.href" model. (This is a real-life production example from my predecessor) This can make users hesitant to click on the link, since they have no idea where it is taking them, for starters.
You are also making Search engine optimization more difficult IMO as well as making the debugging and reading of your code/HTML more complex. A submit button should submit a form. Why should you(the development community) try to create a non-standard UI?
27
I think that is your need.
a href="#" onclick="document.forms[0].submit();return false;"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
