jQuery anchor preventDefault

Question

En utilisant jQuery, comment obtenir la valeur d'une zone de texte, puis charger une nouvelle page en fonction de la valeur?

Par exemple, permet de dire la zone de texte contient « bonjour » sur page1.php, comment puis-je modifier le comportement par défaut d'une balise d'ancrage maintenant charger le

suivant

page2.php? Txt = bonjour

Je donne les résultats suivants jusqu'à présent:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("a.mylink").click(function(event){ 
     alert("link clicked"); 
     event.preventDefault(); 
    }); 
}); 
</script> 

Answer 1

Html

<input type="text" id="demoQuery" /> 
    <a id='demoLink' href='javascript:'>Iam a link</a> 

Javascript

jQuery('#demoLink').bind('click',function(e){ 
     e.preventDefault(); 
     document.location.href="someUrl.php?text="+ jQuery('#demoQuery').val();  
}); 

Answer 2

Vous pouvez utiliser l'événement blur de la zone de texte, donc après que l'utilisateur a fini de taper l'ancre peut être mis à jour en utilisant le jQuery suivant:

$("#textBoxId").blur(function() { 
    var text = $(this).val(); 
    var end = text.length == 0 ? "" : "?txt=" + text; 
    $("a.mylink").attr("href", "Page2.php" + end); 
}); 

Et juste changer le href de l'ancre. Ensuite, vous n'avez pas besoin de manipuler l'ancre click vous-même. L'ancre redirigera simplement vers "Page.php? Txt = Bonjour". Et cela assurera que le lien est toujours à jour et fonctionnera si l'utilisateur clique et sélectionne ouvert dans une nouvelle fenêtre.

Ou vous pouvez faire l'inverse et de gérer le clic de l'ancre:

$("a.mylink").click(function(e) { 
    var text = $("#textBoxId").val(); 
    document.location.href = $(this).attr("href") + "?txt=" + text; 
    e.preventDefault(); 
}); 

Mais si l'utilisateur clique droit, cet événement ne se déclenche pas.

Answer 3

Définissez un événement de clic sur le point d'ancrage pour ajouter la chaîne de requête lors d'un clic.

$('a').click(function() { 
    var querystring = $('input').serialize(); 
    this.href += querystring; 
}); 

Cette méthode utilise la méthode serialize de jQuery. Où le sélecteur est chaque entrée ou champ que vous voulez passer le champ à la page suivante. Bonne chance!

Inutile d'utiliser event.preventDefault.