Comment faire un bouton rediriger vers une autre page en utilisant jQuery ou juste Javascript


101

Je suis en train de créer un prototype et je souhaite que le bouton de recherche renvoie à un exemple de page de résultats de recherche.

Comment faire pour rediriger un bouton vers une autre page lorsque l'utilisateur clique dessus en utilisant jQuery ou JS ordinaire.


J'avais demandé js parce que je n'imaginais pas qu'une simple solution HTML était disponible. Merci, cela a résolu mon objectif.
Ankur

Réponses:


64

Sans script:

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

Mieux encore, puisque vous allez juste quelque part, présentez à l'utilisateur l'interface standard pour "aller quelque part":

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

Cependant, le contexte ressemble à "Simuler une recherche normale où l'utilisateur soumet un formulaire", auquel cas la première option est la voie à suivre.


13
Qui aurait pensé à un lien? haha
meouw

+1 pour le formulaire. Puisqu'il s'agira d'un formulaire de recherche approprié, vous devriez le faire comme ça maintenant si possible.
DisgruntledGoat

@suhail - Trois fois plus de code et une dépendance à JavaScript n'est pas bonne.
Quentin

1
@ayjay - Cliquer sur un bouton d'envoi ne soumet un formulaire que si le bouton d'envoi est associé à ce formulaire. Il s'agit de la manière traditionnelle et la mieux soutenue d'y parvenir.
Quentin

1
@mimi - Non, ce n'est pas le cas. Les problèmes de resoumission de formulaire ne surviennent que lorsque vous faites une demande qui n'est pas «sûre» (auquel cas il devrait s'agir d'un formulaire POST… mais la question portait sur la navigation simple, il n'y a donc aucune raison de ne pas penser qu'elle est sûre). Les navigateurs avertissent uniquement les gens de la possibilité que la demande ne soit pas sûre (ils ne le feront donc pas dans ce cas, car ce n'est pas le cas method="POST").
Quentin

201

c'est ce que tu veux dire?

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

1
Selon cette question et réponse de stackoverflow , il faut se pencher vers window.locationet non document.locationcar ce n'est pas la voie canonique.
Jujhar Singh

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

5
pourquoi retourner faux?
Francisco Corrales Morales

2
Sans le return false, appuyer sur la "touche Entrée ou Retour" pourrait simplement vous amener à l'URL actuelle plutôt que de rediriger vers le nouveau lien. Particulièrement utile, lorsque vous avez un contrôle de saisie de texte que vous souhaitez publier dans une URL différente lorsque vous appuyez sur la touche entrée / retour.
Faith remporte le

2
Ce n'est pas une très bonne explication. La valeur de retour indique s'il faut poursuivre le traitement de l'événement. Par défaut, l'événement continuera à bouillonner et peut déclencher d'autres actions, telles que la soumission d'un formulaire, ou l'accès à un lien, ou rien. Cependant, vous voulez vraiment «absorber» l'événement ici. En renvoyant false, le traitement des événements se terminera ici.
redreinard

1
merci - le retour false m'a sauvé - je me demandais pourquoi l'url ne changerait pas - mais hélas un autre script a dû continuer à traiter le clic.
Derrick Dennis

22

Dans votre html, vous pouvez ajouter un attribut de données à votre bouton:

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

Ensuite, vous pouvez utiliser jQuery pour modifier l'url:

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

J'espère que cela t'aides


2020: Meilleure réponse pour moi en raison du peu de données-cible .... Merci !!!
MarcoZen

21

Avec Javascript simple:

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


10

Pas besoin de javascript, enveloppez-le simplement dans un lien

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

Ankur n'a pas demandé de HTML5 valide, il a demandé une solution pour son prototype
Owen


7

Vous pouvez utiliser window.location

window.location="/newpage.php";

Ou vous pouvez simplement faire en sorte que le formulaire dans lequel se trouve le bouton de recherche ait une action sur la page souhaitée.


4

Vous pouvez utiliser ce code JavaScript simple pour créer un lien vers un exemple de page de résultats de recherche. Ici, j'ai redirigé vers '/ search' de ma page d'accueil, si vous souhaitez effectuer une recherche à partir du moteur de recherche Google, vous pouvez utiliser " https://www.google.com/search " dans l'action de formulaire.

<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

À partir du code YT 2012.

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


2

c'est la façon la plus rapide (la plus lisible, la moins compliquée) de le faire, Owens fonctionne mais ce n'est pas du HTML légal, techniquement cette réponse n'est pas jQuery (mais puisque jQuery est un pseudocode pré-préparé - réinterprété sur la plate-forme client en JavaScript natif - il vraiment est pas une telle chose comme jQuery de toute façon)

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

0

Et dans Rails 3 avec CoffeeScript en utilisant JavaScript discret (UJS):

Ajouter à assets/javascripts/my_controller.js.coffee:

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

qui lit: lorsque l'événement document.ready s'est déclenché, ajoutez un onclickévénement à un objet DOM dont l'ID est field_namequi exécute le javascriptwindow.location.href='new_url';


0

Il y a beaucoup de questions ici sur la redirection côté client, et je ne peux pas en parler à la plupart d'entre elles… celle-ci est une exception.

La redirection n'est pas censée venir du client… elle est censée provenir du serveur. Si vous n'avez aucun contrôle sur le serveur, vous pouvez certainement utiliser Javascript pour choisir une autre URL vers laquelle aller, mais… ce n'est pas une redirection. La redirection se fait avec 300 codes d'état sur le serveur, ou en tapant la balise META en HTML.


0

Utilisez un lien et stylisez-le comme un bouton:

<a href="#page2" class="ui-btn ui-shadow ui-corner-all">Click this button</a>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.