jQuery anchor preventDefault

Question

Używając jQuery, jak uzyskać wartość z pola tekstowego, a następnie załadować nową stronę na podstawie wartości?

Na przykład, powiedzmy, że pole tekstowe zawiera „cześć” na page1.php, w jaki sposób mogę zmienić domyślne zachowanie znacznika zakotwiczenia do teraz załadować następujące

page2.php? Txt = powitania

mam następujące pory:

<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

można użyć zdarzenia blur pola tekstowego, więc gdy użytkownik zakończył wpisując kotwica może być aktualizowany za pomocą następującego jQuery:

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

I po prostu zmień href kotwicy. Wtedy nie musisz sam obsługiwać kotwicy click. Zakotwiczenie przekieruje tylko do "Page.php? Txt = Hello". Zapewni to, że link będzie zawsze aktualny i zadziała, jeśli użytkownik kliknie prawym przyciskiem myszy i wybierze opcję otwarcia w nowym oknie.

Albo można to zrobić na odwrót i uchwyt szczęk kotwicy:

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

ale jeśli prawo użytkownika kliknięć, to wydarzenie nie będzie ogień.

Answer 3

Ustawienie zdarzenia kliknięcia w znaczniku zakotwiczenia, aby dodać ciąg kwerendy po kliknięciu.

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

Wykorzystuje metodę jQuery: serialize. Gdzie selektor jest każdym wejściem lub polem, które chcesz przekazać polu do następnej strony. Powodzenia!

Nie trzeba używać zdarzenia.preventDefault.