Change href based on textfield - AJAX?

Hi guys

I have a little problem. I have 2 textfields and I need to change a link href based on whatever is in those textfields.

The link has to be in this format:

<a class="display" href="test.php?test1=textfield1&test2=textfield2">test</a>


The reason for this is I need to launch fancybox and as far as im aware this is the best way to call it.

So what im hoping is when I add type something in textfield1 this will be reflected in the url. And same for textfield2. I know this can be done easily if I submit the page but I dont want that. Hopefully some javascript/ajax can help me out?

I hope im being clear but let me know if im not.

Thanks so much! :)

You could add an ID to the link and use:
document.getElementById('TheId').attr('href', TheNewHref).

You could add an ID to the link and use:
document.getElementById('TheId').attr('href', TheNewHref).

Hi lerura
Thanks for the reply, but I dont get it :confused: Can you explain more please?

Thanks!

your link<a class="display" href=""> should also have an id<a class="display" id="TheLink" href="TheOldHref">
Then whenever there is a change to any of the textfield a function should be run, that changes the href:
<input type="text" id="Textfield1" onchange="Thefunction()">

thenfunction Thefunction(){
Text1=document.getElementById('Textfield1').value; // \
Text2=document.getElementById('Textfield2').value; // -- reads the textfields
TheNewHref='test.php?test1='+Text1+'&test2='+Text2; //Creates the new href
document.getElementById('TheLink').attr('href', TheNewHref); //Updates the link
}


-------

Another way is to use a javascript-link:
<a class="display" href="#" onclick="GoToUrl()">; and function GotoUrl(){
Text1=document.getElementById('Textfield1').value; // \
Text2=document.getElementById('Textfield2').value; // -- reads the textfields
location.href='test.php?test1='+Text1+'&test2='+Text2; //Creates and goes to the new href;
}

I cant seem to be able to get it to work :(

I want to use your first solution as that seems best but the onchange doesnt seem to work as it still goes to the original href. I have posted it here:

http://eighteights.dyndns.info/link.html

Any ideas anybody? :confused:

This is a mixture of plain javascript and jQuery ... please try this

function Thefunction(){
Text1=document.getElementById('Textfield1').value; // \
Text2=document.getElementById('Textfield2').value; // -- reads the textfields
TheNewHref='test.php?test1='+Text1+'&test2='+Text2; //Creates the new href
document.getElementById('TheLink').href = TheNewHref; //Updates the link
}

This is a mixture of plain javascript and jQuery ... please try this

function Thefunction(){
Text1=document.getElementById('Textfield1').value; // \
Text2=document.getElementById('Textfield2').value; // -- reads the textfields
TheNewHref='test.php?test1='+Text1+'&test2='+Text2; //Creates the new href
document.getElementById('TheLink').href = TheNewHref; //Updates the link
}


Excellent! It works!...thank you so much. :thumbsup: