Cómo hacer que un botón redirija a otra página usando jQuery o simplemente Javascript

101

Estoy haciendo un prototipo y quiero que el botón de búsqueda se vincule a una página de resultados de búsqueda de muestra.

¿Cómo puedo redirigir un botón a otra página cuando se hace clic en él usando jQuery o JS simple?

Ankur
fuente
Había pedido js porque no imaginaba que hubiera disponible una solución HTML simple. Gracias, resolvió mi propósito.
Ankur

Respuestas:

64

Sin guión:

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

Mejor aún, dado que simplemente va a algún lugar, presente al usuario la interfaz estándar para "simplemente ir a algún lado":

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

Aunque, el contexto suena como "Simular una búsqueda normal donde el usuario envía un formulario", en cuyo caso la primera opción es el camino a seguir.

Quentin
fuente
13
¿Quién hubiera pensado en un enlace? jaja
maullido
+1 para el formulario. Dado que eventualmente será un formulario de búsqueda adecuado, debería hacerlo así ahora si es posible.
DisgruntledGoat
@suhail: tres veces más código y una dependencia de JavaScript no es bueno.
Quentin
1
@ayjay: al hacer clic en un botón de envío, solo se envía un formulario si el botón de envío está asociado con ese formulario. Poner la información en él es la forma tradicional y mejor respaldada de hacerlo.
Quentin
1
@mimi - No, no es así. Los problemas de reenvío de formularios solo ocurren cuando realiza una solicitud que no es "segura" (en cuyo caso debería ser un formulario POST ... pero la pregunta era sobre navegación simple, por lo que no hay razón para no pensar que es seguro). Los navegadores solo advierten a las personas sobre la posibilidad de que la solicitud no sea segura (por lo que no lo harán en este caso porque no lo es method="POST").
Quentin
201

¿Es esto lo que quieres decir?

$('button selector').click(function(){
   window.location.href='the_link_to_go_to.html';
})
Reigel
fuente
1
De acuerdo con esta pregunta y respuesta de stackoverflow , uno debe inclinarse hacia window.locationy no, document.locationya que no es la forma canónica.
Jujhar Singh
74
$('#someButton').click(function() {
    window.location.href = '/some/new/page';
    return false;
});
Darin Dimitrov
fuente
5
¿Por qué devolver falso?
Francisco Corrales Morales
2
Sin el return false, presionar la tecla "Enter o Return" podría llevarlo a la URL actual en lugar de redirigirlo al nuevo enlace. Especialmente útil cuando tienes un control de entrada de texto que te gustaría publicar en una URL diferente cuando presionas la tecla Enter / Return.
Faith Wins
2
Esa no es una buena explicación. El valor de retorno indica si continuar procesando el evento. De forma predeterminada, el evento seguirá apareciendo y puede desencadenar otras acciones, como enviar un formulario, ir a un enlace o nada. Sin embargo, realmente quieres "absorber" el evento aquí. Al devolver falso, el procesamiento del evento terminará aquí.
redreinard
1
gracias, el retorno falso me salvó, me preguntaba por qué la URL no cambiaría, pero, por desgracia, algún otro script debe haber continuado procesando el clic.
Derrick Dennis
22

En su html, puede agregar atributos de datos a su botón:

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

Entonces puedes usar jQuery para cambiar la URL:

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

Espero que esto ayude

g-francesca
fuente
2020: La mejor respuesta para mí debido a la parte sobre el objetivo de datos ... ¡¡¡Gracias !!!
MarcoZen
21

Con Javascript simple:

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

Puedes usar:

  location.href = "newpage.html"

en el evento onclick del botón.

Vincent Ramdhanie
fuente
10

No necesita javascript, simplemente envuélvalo en un enlace

<a href="http://www.google.com"><button type="button">button</button></a>
Owen
fuente
Ankur no solicitó HTML5 válido, pidió una solución para su prototipo
Owen
9

Esto debería funcionar ..

$('#buttonID').click(function(){ window.location = 'new url'});
Gabriele Petrioli
fuente
7

Puede usar window.location

window.location="/newpage.php";

O simplemente puede hacer que el formulario en el que se encuentra el botón de búsqueda tenga una acción de la página que desea.

PetersenDidIt
fuente
4

Puede utilizar este sencillo código JavaScript para hacer que el botón de búsqueda se vincule a una página de resultados de búsqueda de muestra. Aquí he redirigido a '/ buscar' de mi página de inicio. Si desea buscar desde el motor de búsqueda de Google, puede usar " https://www.google.com/search " en la acción del formulario.

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

Desde el código YT 2012.

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

Muere
fuente
2

esta es la forma MÁS RÁPIDA (más legible, menos complicada) de hacerlo, Owens funciona pero no es HTML legal, técnicamente esta respuesta no es jQuery (pero dado que jQuery es un pseudocódigo pre-preparado - reinterpretado en la plataforma del cliente como JavaScript nativo - en realidad es ninguna cosa tal como jQuery de todos modos)

 <button onclick="window.location.href='http://www.google.com';">Google</button>
Señor Heelis
fuente
0

Y en Rails 3 con CoffeeScript usando JavaScript no intrusivo (UJS):

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

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

que dice: cuando se haya disparado el evento document.ready, agregue un onclickevento a un objeto DOM cuyo ID es el field_nameque ejecuta el javascriptwindow.location.href='new_url';

Tom Harrison
fuente
0

Hay muchas preguntas aquí sobre el redireccionamiento del lado del cliente, y no puedo soltar la mayoría de ellas ... esta es una excepción.

No se supone que la redirección provenga del cliente ... se supone que proviene del servidor. Si no tiene control sobre el servidor, ciertamente puede usar Javascript para elegir otra URL a la que ir, pero… eso no es redirección. La redirección se realiza con 300 códigos de estado en el servidor o utilizando la etiqueta META en HTML.

Michael Blake
fuente
0

Usa un enlace y dale estilo como un botón:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
Lobo rojo
fuente