Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts

    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:
    Code:
    <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!

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    You could add an ID to the link and use:
    Code:
    document.getElementById('TheId').attr('href', TheNewHref).

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    You could add an ID to the link and use:
    Code:
    document.getElementById('TheId').attr('href', TheNewHref).
    Hi lerura
    Thanks for the reply, but I dont get it Can you explain more please?

    Thanks!

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    your link
    Code:
    <a class="display" href="">
    should also have an id
    Code:
    <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:
    Code:
    <input type="text" id="Textfield1" onchange="Thefunction()">
    then
    Code:
    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:
    Code:
    <a class="display" href="#" onclick="GoToUrl()">;
    and
    Code:
    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;
    }

  • Users who have thanked Lerura for this post:

    vorl (07-20-2011)

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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:

    Code:
    http://eighteights.dyndns.info/link.html
    Any ideas anybody?
    Last edited by vorl; 07-20-2011 at 01:23 PM.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is a mixture of plain javascript and jQuery ... please try this
    Code:
    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
    }

  • Users who have thanked devnull69 for this post:

    vorl (07-20-2011)

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    190
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    This is a mixture of plain javascript and jQuery ... please try this
    Code:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •