Hoe kan ik een <input type=button>laten werken als een hyperlink en omleiden met een GET-verzoek?
Antwoord 1, autoriteit 100%
U kunt een <button>-tag maken om de volgende actie uit te voeren:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
of:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
Het is eenvoudig en geen javascript vereist!
OPMERKING:
Deze benadering is niet geldig vanuit de HTML-structuur. Maar het werkt op veel moderne browsers. Zie volgende referentie:
Antwoord 2, autoriteit 94%
Er zijn verschillende manieren om dat te doen — plaats het eerst in een formulier dat verwijst naar waar je het wilt hebben:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
Dit heeft het voordeel dat het zelfs werkt zonder dat javascript is ingeschakeld.
Ten tweede, gebruik een zelfstandige knop met javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
Dit zal echter mislukken in browsers zonder JavaScript (Opmerking: dit is echteen slechte gewoonte — je zou event handlers moeten gebruiken, geen inline code zoals deze — dit is gewoon de eenvoudigste manier om ter illustratie van het soort dingen waar ik het over heb.)
De derde optie is om een echte link als een knop te stylen:
<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>
Dit heeft het voordeel dat het overal enwerkt wat je waarschijnlijk wilt dat het betekent.
Antwoord 3, autoriteit 4%
<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>
Hier is de andere manier, het is eenvoudiger dan de andere.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
Het is eenvoudiger.
Antwoord 4, autoriteit 3%
Voor degenen die dit tegenkomen bij een zoekopdracht (Google) en proberen te vertalen naar .NET- en MVC-code. (zoals in mijn geval)
@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
Hiermee wordt een knop weergegeven met het label “Process” en gaat u naar “/Process/RemoveLostRolls”.
Zonder “FormMethod.Get” werkte het, maar werd het gezien als een “post”.
Antwoord 5, autoriteit 2%
Doe het niet. Ik wil misschien mijn auto op apenbloed laten rijden. Ik heb mijn redenen, maar soms is het beter om dingen te gebruiken zoals ze zijn ontworpen, zelfs als het niet “absoluut perfect” overeenkomt met de exacte look waar je naar op zoek bent.
Om mijn argument kracht bij te zetten, dien ik het volgende in.
- Zie hoe deze afbeelding de statusbalk onderaan mist. Deze link gebruikt het
onclick="location.href"-model. (Dit is een echt productievoorbeeld van mijn voorganger) Hierdoor kunnen gebruikers aarzelen om op de link te klikken, omdat ze om te beginnen geen idee hebben waar het naartoe leidt.
U maakt zoekmachineoptimalisatie ook moeilijker IMO en maakt het debuggen en lezen van uw code/HTML complexer. Een verzendknop moet een formulier verzenden. Waarom zou u (de ontwikkelingsgemeenschap) proberen een niet-standaard gebruikersinterface te maken?
Antwoord 6
Ik denk dat dat jouw behoefte is.
a href="#" onclick="document.forms[0].submit();return false;"