Problem
How can I create a GET request redirect an input type=button> that acts as a hyperlink?
Asked by Blankman
Solution #1
You may use the button> tag to perform the following action:
<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 easy to do, and there’s no need for javascript!
Answered by Wayan Wiprayoga
Solution #2
There are numerous options for doing so. The simplest is to simply place it inside a form that directs to the location 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 benefit of operating without javascript enabled.
Second, use javascript to create a standalone button:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This, on the other hand, will fail on browsers that don’t support JavaScript (Note: this is bad practice; event handlers, not inline code, should be used instead; this is just the easiest method of illustrating the type of thing I’m talking about.)
The third option is to make a button out of a link:
<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 benefit of functioning everywhere and most likely meaning what you want it to imply.
Answered by Sean Vieira
Solution #3
<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 another option; it’s a lot easier than the first.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It’s simpler.
Answered by phani_yelugula
Solution #4
For those who came across this through a Google search and are trying to translate it to.NET and MVC code. (as is the case in my instance)
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will display a “Process” button that will send you to “/Process/RemoveLostRolls.” It worked without “FormMethod.Get,” but it was interpreted as a “post.”
Answered by Greg Little
Solution #5
Do not attempt it. I’m thinking about running my automobile on monkey blood. I have my reasons, but sometimes it’s best to use things the way they were built, even if it doesn’t “quite” match the look you’re going for.
I offer the following evidence to support my position.
You’re also making it more difficult to optimize your site for search engines, as well as troubleshooting and reading your code/HTML. A form should be submitted using a submit button. Why should you (the developer community) attempt to design a UI that isn’t standard?
Answered by Doug Chamberlain
Post is based on https://stackoverflow.com/questions/3303675/how-to-make-an-input-type-button-act-like-a-hyperlink-and-redirect-using-a-get-r