CODEWITHSUNDEEP
javascriptjquery
oshirowanen
oshirowanen

Reputation: 15925

jQuery anchor preventDefault

Using jQuery, how do I get the value from a textbox and then load a new page based on the value?

For example, lets say the textbox contains "hello" on page1.php, how do I change the default behavior of an anchor tag to now load the following

page2.php?txt=hello

I have the following so far:

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

Upvotes: 15

Views: 31023

Answers (3)

Praveen Prasad
Praveen Prasad

Reputation: 32107

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();     
});

Upvotes: 28

djdd87
djdd87

Reputation: 68456

You can use the blur event of the text box, so after the user has finished typing the anchor can be updated using the following jQuery:

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

And just change the href of the anchor. Then you don't need to handle the anchor click yourself. The anchor will just redirect to "Page.php?txt=Hello". And this will ensure that the link is always up to date and will work if the user right clicks and selects open in new window.

Or you could do it the other way around and handle the click of the anchor:

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

But if the user right clicks, this event will not fire.

Upvotes: 3

John Strickler
John Strickler

Reputation: 25421

Set a click event on the anchor tag to add the query string when it is clicked.

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

This uses jQuery's serialize method. Where the selector is every input or field you want to pass the field to the next page. Good luck!

No need to use event.preventDefault.

Upvotes: 3

Related Questions