So leiten Sie eine Schaltfläche mit jQuery oder einfach nur Javascript auf eine andere Seite um


101

Ich mache einen Prototyp und möchte, dass die Suchschaltfläche auf eine Beispielsuchergebnisseite verweist.

Wie leite ich eine Schaltfläche auf eine andere Seite um, wenn mit jQuery oder einfachem JS darauf geklickt wird?


Ich hatte nach js gefragt, weil ich mir nicht vorstellen konnte, dass eine einfache HTML-Lösung verfügbar ist. Danke, es hat meinen Zweck gelöst.
Ankur

Antworten:


64

Ohne Skript:

<form action="where-you-want-to-go"><input type="submit"></form>

Besser noch, da Sie nur irgendwohin gehen, präsentieren Sie dem Benutzer die Standardschnittstelle für "nur irgendwohin gehen":

<a href="where-you-want-to-go">ta da</a>

Der Kontext klingt zwar wie "Simulieren Sie eine normale Suche, bei der der Benutzer ein Formular sendet". In diesem Fall ist die erste Option der richtige Weg.


13
Wer hätte an einen Link gedacht? haha
meouw

+1 für das Formular. Da es sich irgendwann um ein richtiges Suchformular handelt, sollten Sie es jetzt, wenn möglich, so machen.
DisgruntledGoat

@suhail - Dreimal so viel Code und eine Abhängigkeit von JavaScript ist nicht gut.
Quentin

1
@ayjay - Durch Klicken auf eine Senden-Schaltfläche wird ein Formular nur gesendet, wenn die Senden-Schaltfläche diesem Formular zugeordnet ist. Die Eingabe ist die traditionelle und am besten unterstützte Methode, um dies zu tun.
Quentin

1
@mimi - Nein, das tut es nicht. Probleme beim erneuten Senden von Formularen treten nur auf, wenn Sie eine Anfrage stellen, die nicht "sicher" ist (in diesem Fall sollte es sich um ein POST-Formular handeln. Die Frage bezog sich jedoch auf die einfache Navigation, sodass es keinen Grund gibt, sie nicht für sicher zu halten). Browser warnen nur dann vor der Möglichkeit, wenn die Anfrage möglicherweise nicht sicher ist (in diesem Fall jedoch nicht, weil dies nicht der Fall ist method="POST").
Quentin

201

ist es das was du meinst?

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})

1
Nach dieser Frage und Antwort zum Stackoverflow sollte man sich zu beugenwindow.location und nicht, document.locationda dies nicht der kanonische Weg ist.
Jujhar Singh

74
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});

5
warum falsch zurückgeben?
Francisco Corrales Morales

2
Wenn Sie die return falseTaste "Enter" oder "Return" drücken, gelangen Sie möglicherweise nur zur aktuellen URL, anstatt zum neuen Link umzuleiten. Besonders nützlich, wenn Sie ein Texteingabesteuerelement haben, das Sie an eine andere URL senden möchten, wenn Sie die Eingabetaste drücken.
Glaube gewinnt

2
Das ist keine sehr gute Erklärung. Der Rückgabewert gibt an, ob das Ereignis weiter verarbeitet werden soll. Standardmäßig sprudelt das Ereignis weiter und kann andere Aktionen auslösen, z. B. das Senden eines Formulars oder das Aufrufen eines Links oder nichts. Sie möchten das Ereignis hier jedoch wirklich "absorbieren". Durch die Rückgabe von false wird die Ereignisverarbeitung hier beendet.
Redreinard

1
danke - die falsche Rückgabe hat mich gerettet - hat sich gefragt, warum sich die URL nicht ändern würde - aber leider muss ein anderes Skript den Klick weiter verarbeitet haben.
Derrick Dennis

22

In Ihrem HTML-Code können Sie Ihrer Schaltfläche Datenattribute hinzufügen:

<button type="submit" class="mybtn" data-target="/search.html">Search</button>

Dann können Sie jQuery verwenden, um die URL zu ändern:

$('.mybtn').on('click', function(event) {
    event.preventDefault(); 
    var url = $(this).data('target');
    location.replace(url);
});

Hoffe das hilft


2020: Beste Antwort für mich aufgrund des Datenziels .... Danke !!!
MarcoZen

21

Mit einfachem Javascript:

<input type="button" onclick="window.location = 'path-here';">

10

Sie können verwenden:

  location.href = "newpage.html"

im Onclick-Ereignis der Schaltfläche.


10

Kein Javascript erforderlich, einfach in einen Link einbinden

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

Ankur fragte nicht nach gültigem HTML5, er fragte nach einer Lösung für seinen Prototyp
Owen


7

Sie können window.location verwenden

window.location="/newpage.php";

Oder Sie können einfach festlegen, dass das Formular, in dem sich die Suchschaltfläche befindet, eine Aktion der gewünschten Seite enthält.


4

Mit diesem einfachen JavaScript-Code können Sie eine Suchschaltfläche zum Verknüpfen mit einer Beispielsuchergebnisseite erstellen. Hier habe ich zu "/ search" meiner Startseite weitergeleitet. Wenn Sie über die Google-Suchmaschine suchen möchten, können Sie " https://www.google.com/search " in Formularaktion verwenden.

<form action="/search"> Enter your search text: 
<input type="text" id="searchtext" name="q"> &nbsp;
<input onclick="myFunction()" type="submit" value="Search It" />
</form> 
<script> function myFunction() 
{ 
var search = document.getElementById("searchtext").value; 
window.location = '/search?q='+search; 
} 
</script>

2

Ab YT 2012 Code.

<button href="https://stackoverflow.com/signin" onclick=";window.location.href=this.getAttribute('href');return false;">Sign In</button>


2

Dies ist der SCHNELLSTE (am besten lesbare, am wenigsten komplizierte) Weg, Owens funktioniert, aber es ist kein legaler HTML- Code. Technisch gesehen ist diese Antwort nicht jQuery (aber da jQuery ein vorbereiteter Pseudocode ist - auf der Client-Plattform als natives JavaScript neu interpretiert - es wirklich ist nicht so etwas wie jQuery sowieso)

 <button onclick="window.location.href='http://www.google.com';">Google</button>

0

Und in Rails 3 mit CoffeeScript mit unauffälligem JavaScript (UJS):

Hinzufügen zu assets/javascripts/my_controller.js.coffee:

$ ->
  $('#field_name').click ->
    window.location.href = 'new_url'

Dies lautet: Wenn das Ereignis document.ready ausgelöst wurde, fügen Sie onclickeinem DOM-Objekt ein Ereignis hinzu, dessen ID field_namedas Javascript ausführtwindow.location.href='new_url';


0

Hier gibt es viele Fragen zur clientseitigen Weiterleitung, und ich kann die meisten nicht ansprechen. Dies ist eine Ausnahme.

Die Umleitung soll nicht vom Client kommen, sondern vom Server. Wenn Sie keine Kontrolle über den Server haben, können Sie sicherlich Javascript verwenden, um eine andere URL auszuwählen, zu der Sie wechseln möchten, aber… das ist keine Umleitung. Die Umleitung erfolgt mit 300 Statuscodes auf dem Server oder durch Anwenden des META-Tags in HTML.


0

Verwenden Sie einen Link und gestalten Sie ihn wie eine Schaltfläche:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.