...

View Full Version : Change href based on textfield - AJAX?



vorl
07-19-2011, 02:36 AM
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! :)

Lerura
07-19-2011, 03:21 AM
You could add an ID to the link and use:

document.getElementById('TheId').attr('href', TheNewHref).

vorl
07-19-2011, 03:12 PM
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!

Lerura
07-20-2011, 12:54 AM
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()">

then
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').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;
}

vorl
07-20-2011, 01:16 PM
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:

devnull69
07-20-2011, 01:56 PM
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
}

vorl
07-20-2011, 02:01 PM
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:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum