Coder Perfect

How can I make a type=button input behave as a hyperlink and redirect with a get request? [duplicate]


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="">
   <button>Visit Google</button>


<a href="">
   <input type="button" value="Visit Google" />

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" />

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.

<div class="my_content_container">
    <a href="/my/link/location/">Go to my link location</a>

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();
// -->
<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)"/>

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