web-dev-qa-db-de.com

Wie kann man einen Eingabetyp = Button wie einen Hyperlink verhalten und mit einer Get-Anfrage umleiten?

Wie mache ich ein <input type=button> verhalten sich wie ein Hyperlink und leiten mit einer GET Anfrage weiter?

135
Blankman

Es gibt verschiedene Möglichkeiten, dies zu tun. Fügen Sie es einfach in ein Formular ein, das darauf hinweist, wohin Sie es möchten:

<form action="/my/link/location" method="get">
    <input type="submit" value="Go to my link location" 
         name="Submit" id="frm1_submit" />
</form>

Dies hat den Vorteil, dass Sie auch ohne aktiviertes Javascript arbeiten können.

Zweitens verwenden Sie eine eigenständige Schaltfläche mit Javascript:

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />       

Dies schlägt jedoch in Browsern ohne JavaScript fehl (Hinweis: Dies ist wirklich eine schlechte Praxis - Sie sollten Ereignishandler verwenden, keinen Inline-Code wie diesen - dies ist nur die einfachste Art, die Art zu veranschaulichen von was ich rede.)

Die dritte Option besteht darin, einen tatsächlichen Link wie eine Schaltfläche zu gestalten:

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

Dies hat den Vorteil, dass Sie überall arbeiten können nd was bedeutet, was Sie höchstwahrscheinlich wollen.

142
Sean Vieira

Du kannst das schaffen <button>-Tag, um Aktionen wie diese auszuführen:

<a href="http://www.google.com/">
   <button>Visit Google</button>
</a>

oder:

<a href="http://www.google.com/">
   <input type="button" value="Visit Google" />
</a>

Es ist einfach und kein Javascript erforderlich!


HINWEIS:

Dieser Ansatz ist in der HTML-Struktur nicht gültig. Aber es funktioniert auf vielen modernen Browsern. Siehe folgende Referenz:

133
Wayan Wiprayoga
    <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 ist der andere Weg, es ist einfacher als der andere.

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

Es ist einfacher.

6
phani_yelugula

Für diejenigen, die über eine Suche (Google) darauf stoßen und versuchen, in .NET- und MVC-Code zu übersetzen. (wie in meinem Fall)

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
     <input type="submit" value="Process" />
}

Daraufhin wird eine Schaltfläche mit der Bezeichnung "Process" (Verarbeiten) angezeigt, die Sie zu "/ Process/RemoveLostRolls" führt. Ohne "FormMethod.Get" hat es funktioniert, wurde aber als "Post" angesehen.

4
Greg Little

Ich denke, das ist dein Bedürfnis.

a href="#" onclick="document.forms[0].submit();return false;"
3
diogo

TU es nicht. Ich könnte mein Auto mit Affenblut fahren. Ich habe meine Gründe, aber manchmal ist es besser, die Dinge so zu verwenden, wie sie entworfen wurden, auch wenn sie nicht "absolut perfekt" zu dem Look passen, den Sie anstreben.

Um mein Argument zu untermauern, lege ich Folgendes vor.

  • Sehen Sie, wie diesem Bild die Statusleiste unten fehlt. Dieser Link benutzt das onclick="location.href" Modell. (Dies ist ein reales Produktionsbeispiel meines Vorgängers.) Dies kann dazu führen, dass Benutzer zögern, auf den Link zu klicken, da sie zunächst keine Ahnung haben, wohin er führt.

Image

Außerdem erschweren Sie die Suchmaschinenoptimierung, und das Debuggen und Lesen von Code/HTML wird komplexer. Über die Schaltfläche "Senden" sollte ein Formular gesendet werden. Warum sollten Sie (die Entwicklergemeinschaft) versuchen, eine nicht standardmäßige Benutzeroberfläche zu erstellen?

2