jQuery anchor preventDefault

Question

Usando jQuery, ¿cómo obtengo el valor de un cuadro de texto y luego cargo una página nueva basada en el valor?

Por ejemplo, digamos el cuadro de texto contiene "Hola" en pagina1.php, ¿cómo cambio el comportamiento predeterminado de una etiqueta de ancla a cargar ahora el siguiente

pagina2.php? Txt = hola

Tengo el siguiente hasta el momento:

<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

Usted puede utilizar el evento blur del cuadro de texto, por lo que después de que el usuario ha terminado de escribir el ancla se puede actualizar mediante el siguiente jQuery:

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

Y simplemente cambie el href del anclaje. Entonces no necesita manejar el ancla click usted mismo. El ancla simplemente redirigirá a "Page.php? Txt = Hello". Y esto asegurará que el enlace esté siempre actualizado y funcionará si el usuario hace clic derecho y selecciona abrir en una nueva ventana.

O usted podría hacerlo al revés y manejar el clic del ancla:

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

Pero si los clics de derechos de utilización, este evento no se disparará.

Answer 3

Establezca un evento de clic en la etiqueta de anclaje para agregar la cadena de consulta cuando se hace clic en ella.

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

Esto usa el método serialize de jQuery. Donde el selector es cada entrada o campo, quiere pasar el campo a la página siguiente. ¡Buena suerte!

No es necesario utilizar event.preventDefault.