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 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?
Antworten:
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.
method="POST"
).
ist es das was du meinst?
$('button selector').click(function(){
window.location.href='the_link_to_go_to.html';
})
window.location
und nicht, document.location
da dies nicht der kanonische Weg ist.
$('#someButton').click(function() {
window.location.href = '/some/new/page';
return false;
});
return false
Taste "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.
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
Sie können verwenden:
location.href = "newpage.html"
im Onclick-Ereignis der Schaltfläche.
Das sollte funktionieren ..
$('#buttonID').click(function(){ window.location = 'new url'});
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.
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">
<input onclick="myFunction()" type="submit" value="Search It" />
</form>
<script> function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search;
}
</script>
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>
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 onclick
einem DOM-Objekt ein Ereignis hinzu, dessen ID field_name
das Javascript ausführtwindow.location.href='new_url';
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.
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>