jQuery anchor preventDefault

Question

Utilizzando jQuery, come si ottiene il valore da una casella di testo e quindi si carica una nuova pagina in base al valore?

Ad esempio, consente di dire la casella di testo contiene "ciao" in page1.php, come faccio a cambiare il comportamento di default di un tag di ancoraggio ad ora caricare i seguenti

page2.php? Txt = ciao

ho il seguente finora:

<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

è possibile utilizzare l'evento blur della casella di testo, in modo da dopo che l'utente ha finito di scrivere l'ancora può essere aggiornato utilizzando il seguente jQuery:

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

E basta cambiare l'href dell'ancora. Quindi non è necessario gestire l'ancora click da soli. L'ancora si limiterà a "Page.php? Txt = Ciao". E questo garantirà che il collegamento sia sempre aggiornato e funzionerà se l'utente fa clic con il tasto destro del mouse e seleziona l'apertura in una nuova finestra.

Oppure si potrebbe fare il contrario e gestire il clic dell'ancora:

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

Ma se gli scatti giusti utente, questo evento non scatta.

Answer 3

Impostare un evento click sul tag anchor per aggiungere la stringa di query quando viene fatto clic.

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

Questo utilizza il metodo serialize di jQuery. Dove il selettore è ogni input o campo, vuoi passare il campo alla pagina successiva. In bocca al lupo!

Non è necessario utilizzare event.preventDefault.