Como fazer um botão redirecionar para outra página usando jQuery ou apenas Javascript


101

Estou fazendo um protótipo e quero que o botão de pesquisa vincule a uma página de resultados de pesquisa de exemplo.

Como faço um botão redirecionar para outra página quando ele é clicado usando jQuery ou JS simples.


Eu pedi js porque não imaginava que uma solução HTML simples estivesse disponível. Obrigado, resolveu meu propósito.
Ankur

Respostas:


64

Sem script:

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

Melhor ainda, já que você está apenas indo a algum lugar, apresente ao usuário a interface padrão para "apenas ir a algum lugar":

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

Embora, o contexto soe como "Simule uma pesquisa normal onde o usuário envia um formulário", caso em que a primeira opção é o caminho a percorrer.


13
Quem teria pensado em um link? haha
meouw de

1 para o formulário. Uma vez que será um formulário de pesquisa adequado, você deve fazê-lo assim agora, se possível.
DisgruntledGoat

@suhail - Três vezes mais código e uma dependência de JavaScript não é bom.
Quentin

1
@ayjay - Clicar em um botão de envio apenas envia um formulário se o botão de envio estiver associado a esse formulário. Inserir a entrada é a maneira tradicional e com melhor suporte de fazer isso.
Quentin

1
@mimi - Não, não importa. Problemas de reenvio de formulário só ocorrem quando você está fazendo uma solicitação que não é "segura" (nesse caso, deveria ser um formulário POST ... mas a pergunta era sobre navegação simples, então não há razão para não pensar que é seguro). Os navegadores apenas avisam as pessoas sobre a possibilidade de quando a solicitação pode não ser segura (então eles não o farão neste caso, porque não é method="POST").
Quentin

201

É isto que você quer dizer?

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

1
De acordo com esta pergunta e resposta do stackoverflow , deve-se inclinar para window.locatione não document.locationporque não é a forma canônica.
Jujhar Singh de

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

5
por que retornar falso?
Francisco Corrales Morales

2
Sem o return false, pressionar a tecla "Enter ou Return" pode apenas levá-lo ao url atual em vez de redirecionar para o novo link. Especialmente útil, quando você tem um controle de entrada de texto que gostaria de postar em uma url diferente ao pressionar a tecla Enter / Return.
Faith vence em

2
Essa não é uma explicação muito boa. O valor de retorno indica se deve continuar processando o evento. Por padrão, o evento continuará a borbulhar e pode desencadear outras ações, como enviar um formulário, ir a um link ou nada. No entanto, você realmente deseja "absorver" o evento aqui. Ao retornar false, o processamento do evento terminará aqui.
redreinard

1
obrigado - o retorno falso me salvou - estava me perguntando por que o url não mudaria - mas, infelizmente, algum outro script deve ter continuado processando o clique.
Derrick Dennis

22

Em seu html, você pode adicionar atributos de dados ao seu botão:

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

Então você pode usar jQuery para alterar o url:

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

Espero que isto ajude


2020: Melhor resposta para mim devido à parte sobre data-target .... Obrigado !!!
MarcoZen

21

Com Javascript simples:

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


10

Não há necessidade de javascript, basta envolvê-lo em um link

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

Ankur não pediu um HTML5 válido, ele pediu uma solução para seu protótipo
Owen


7

Você pode usar window.location

window.location="/newpage.php";

Ou você pode simplesmente fazer com que o formulário em que está o botão de pesquisa tenha uma ação da página desejada.


4

Você pode usar este código JavaScript simples para fazer o botão de pesquisa vincular a uma página de resultados de pesquisa de amostra. Aqui eu redirecionei para '/ search' da minha página inicial. Se você quiser pesquisar no mecanismo de pesquisa do Google, pode usar " https://www.google.com/search " no formulário de ação.

<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

Do código do YT 2012.

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


2

esta é a maneira MAIS RÁPIDA (mais legível, menos complicada) de fazer isso, Owens funciona, mas não é HTML legal, tecnicamente essa resposta não é jQuery (mas como jQuery é um pseudocódigo pré-preparado - reinterpretado na plataforma do cliente como JavaScript nativo - existe realmente é nenhuma coisa como jQuery de qualquer maneira)

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

0

E no Rails 3 com CoffeeScript usando JavaScript não intrusivo (UJS):

Adicionar a assets/javascripts/my_controller.js.coffee:

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

que diz: quando o evento document.ready for disparado, adicione um onclickevento a um objeto DOM cujo ID é o field_nameque executa o javascriptwindow.location.href='new_url';


0

Há muitas perguntas aqui sobre o redirecionamento do lado do cliente, e não posso responder sobre a maioria delas ... este é uma exceção.

O redirecionamento não deve vir do cliente ... deve vir do servidor. Se você não tem controle sobre o servidor, certamente pode usar Javascript para escolher outro URL para ir, mas ... isso não é redirecionamento. O redirecionamento é feito com 300 códigos de status no servidor ou por meio da inserção da tag META em HTML.


0

Use um link e estilize-o como um botão:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.