CODEWITHSUNDEEP
jqueryjquery-selectors
Tumay
Tumay

Reputation: 498

Jquery: Dynamically Change href on user input

i want to change a link's href based on the user's input, so far i have this:

<input type="text" id="pdf" value="Enter ID" />
<a class="target" href="#">Download</a>

and

function URL() {
var newurl = $('#pdf').val();
$('a.target').attr('href', newurl);
}

However this is not working as it was supposed to. I simply want download url to be changed to the value of input text. So if i wrote "123" link would go to "123", but nothing is changing.

Probably i am missing something, i have read the answers about changing href dynamically, but i am kinda stuck here. Either this is not possible or i am doing something wrong.

Thanks

Edit: I mistakenly left the function and forgot to call it

Edit 2: It now gets the value from text box, but not dynamically changing.

Upvotes: 4

Views: 23878

Answers (4)

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

you forgot the blur or change event

$("#pdf").blur(URL);

Upvotes: 1

Herman Schaaf
Herman Schaaf

Reputation: 48445

You forgot to add the change event to the input. A nice short way of doing this is:

$("#pdf").live("change keypress keyup", function() {
     $("a.target").attr("href", (this).val());
});

Upvotes: 1

svjson
svjson

Reputation: 2115

It's possible to alter the href, but have you bound a change listener to the input field?

This should to the trick:

$(document).ready(function() {
    $('#pdf').change(function() {
      var newurl = $('#pdf').val();
      $('a.target').attr('href', newurl);
    });
});

Upvotes: 7

Grant Thomas
Grant Thomas

Reputation: 45083

I'm unsure of when you expect your function to execute since you don't show us that you've subscribed to any events, etc; but this ought to solve your problem rather simply:

$("#pdf").change(function() {
    $(".target").attr("href", $(this).val());
});

Upvotes: 0

Related Questions