Jak sprawić, by przycisk przekierowywał na inną stronę za pomocą jQuery lub po prostu Javascript

101

Tworzę prototyp i chcę, aby przycisk wyszukiwania łączył się z przykładową stroną wyników wyszukiwania.

Jak ustawić przycisk przekierowujący do innej strony, gdy zostanie kliknięty za pomocą jQuery lub zwykłego JS.

Ankur
źródło
Poprosiłem o js, ​​ponieważ nie wyobrażałem sobie, że dostępne jest proste rozwiązanie HTML. Dzięki temu rozwiązał mój cel.
Ankur

Odpowiedzi:

64

Bez skryptu:

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

Jeszcze lepiej, ponieważ po prostu gdzieś się wybierasz, przedstaw użytkownikowi standardowy interfejs „po prostu gdzieś się wybieram”:

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

Chociaż kontekst brzmi jak „Symuluj normalne wyszukiwanie, w którym użytkownik przesyła formularz”, w takim przypadku najlepszym rozwiązaniem jest pierwsza opcja.

Quentin
źródło
13
Kto by pomyślał o łączu? haha
meouw
+1 dla formularza. Ponieważ ostatecznie będzie to właściwy formularz wyszukiwania, powinieneś zrobić to teraz, jeśli to możliwe.
DisgruntledGoat
@suhail - Trzy razy więcej kodu i zależność od JavaScript nie jest dobra.
Quentin
1
@ayjay - kliknięcie przycisku przesyłania powoduje przesłanie formularza tylko wtedy, gdy przycisk przesyłania jest skojarzony z tym formularzem. Wprowadzenie danych wejściowych jest tradycyjnym i najlepiej obsługiwanym sposobem, aby to zrobić.
Quentin
1
@mimi - Nie, nie działa. Problemy z ponownym przesłaniem formularza występują tylko wtedy, gdy wysyłasz żądanie, które nie jest „bezpieczne” (w takim przypadku powinien to być formularz POST… ale pytanie dotyczyło prostej nawigacji, więc nie ma powodu, aby nie sądzić, że jest to bezpieczne). Przeglądarki ostrzegają ludzi tylko o możliwości, gdy żądanie może nie być bezpieczne (więc w tym przypadku nie będzie, ponieważ nie jest method="POST").
Quentin
201

czy to masz na myśli?

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})
Reigel
źródło
1
Zgodnie z tym pytaniem i odpowiedzią, należy skłaniać się ku, window.locationa nie, document.locationponieważ nie jest to sposób kanoniczny.
Jujhar Singh
74
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});
Darin Dimitrov
źródło
5
dlaczego zwracać fałsz?
Francisco Corrales Morales
2
Bez tego return falsenaciśnięcie klawisza „Enter lub Return” może po prostu przenieść Cię do bieżącego adresu URL, zamiast przekierowywać do nowego łącza. Jest to szczególnie przydatne, gdy masz kontrolkę wprowadzania tekstu, którą chciałbyś wysłać pod inny adres URL po naciśnięciu klawisza Enter / Return.
Faith wygrywa
2
To niezbyt dobre wyjaśnienie. Wartość zwracana wskazuje, czy kontynuować przetwarzanie zdarzenia. Domyślnie zdarzenie będzie nadal się rozwijać i może wywołać inne działania, takie jak przesłanie formularza, przejście do łącza lub nic. Jednak naprawdę chcesz "wchłonąć" to wydarzenie tutaj. Zwrócenie wartości false spowoduje zakończenie przetwarzania zdarzeń tutaj.
redreinard
1
dzięki - fałszywy zwrot mnie uratował - zastanawiałem się, dlaczego adres URL się nie zmieni - ale niestety jakiś inny skrypt musiał kontynuować przetwarzanie kliknięcia.
Derrick Dennis,
22

W swoim html możesz dodać atrybut danych do swojego przycisku:

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

Następnie możesz użyć jQuery do zmiany adresu URL:

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

Mam nadzieję że to pomoże

g-francesca
źródło
2020: Najlepsza odpowiedź dla mnie ze względu na fragment dotyczący celu danych ... Dzięki !!!
MarcoZen
21

Z prostym JavaScriptem:

<input type="button" onclick="window.location = 'path-here';">
Sarfraz
źródło
10

Możesz użyć:

  location.href = "newpage.html"

w zdarzeniu onclick przycisku.

Vincent Ramdhanie
źródło
10

Nie potrzebujesz javascript, po prostu zawiń go w link

<a href="http://www.google.com"><button type="button">button</button></a>
piekarnik
źródło
Ankur nie poprosił o poprawny HTML5, poprosił o rozwiązanie dla swojego prototypu
Owen
9

To powinno działać ..

$('#buttonID').click(function(){ window.location = 'new url'});
Gabriele Petrioli
źródło
7

Możesz użyć window.location

window.location="/newpage.php";

Lub możesz po prostu nadać formularzowi, w którym znajduje się przycisk wyszukiwania, akcję żądanej strony.

PetersenDidIt
źródło
4

Możesz użyć tego prostego kodu JavaScript, aby utworzyć przycisk wyszukiwania jako łącze do przykładowej strony wyników wyszukiwania. Tutaj przekierowałem do '/ search' mojej strony głównej. Jeśli chcesz wyszukiwać w wyszukiwarce Google, możesz użyć https://www.google.com/search w akcji formularza.

<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>
shuseel
źródło
2

Z kodu YT 2012.

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

DIES
źródło
2

jest to NAJSZYBSZY (najbardziej czytelny, najmniej skomplikowany) sposób na zrobienie tego, Owens działa, ale nie jest to legalny HTML, technicznie rzecz biorąc, ta odpowiedź nie jest jQuery (ale ponieważ jQuery to wstępnie przygotowany pseudokod - reinterpretowany na platformie klienta jako natywny JavaScript - tam naprawdę jest coś takiego jak jQuery tak)

 <button onclick="window.location.href='http://www.google.com';">Google</button>
Panie Heelis
źródło
0

A w Railsach 3 z CoffeeScriptem używającym dyskretnego JavaScript (UJS):

Dodaj do assets/javascripts/my_controller.js.coffee:

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

który czyta: kiedy zdarzenie document.ready zostało wywołane, dodaj onclickzdarzenie do obiektu DOM, którego ID to field_namewykonujący javascriptwindow.location.href='new_url';

Tom Harrison
źródło
0

Jest tu wiele pytań dotyczących przekierowania po stronie klienta i nie mogę odpowiedzieć na większość z nich… ten jest wyjątkiem.

Przekierowanie nie powinno pochodzić od klienta… powinno pochodzić z serwera. Jeśli nie masz kontroli nad serwerem, z pewnością możesz użyć JavaScript, aby wybrać inny adres URL, do którego chcesz się udać, ale… to nie jest przekierowanie. Przekierowanie odbywa się za pomocą 300 kodów stanu na serwerze lub przez użycie znacznika META w HTML.

Michael Blake
źródło
0

Użyj linku i nadaj mu styl jak przycisk:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
Czerwony wilk
źródło