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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    478
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Can JavaScript change a link's href?

    Let's say I have a link that looks like this:

    <a name="MyLink" href="otherpage1.htm">Other Page</a>

    Is there any JavaScript code I could use (it would perhaps be triggered by the onchange event of a listbox) to change the link to be like this instead (i.e. href of otherpage2.htm)?:

    <a name="MyLink" href="otherpage2.htm">Other Page</a>
    J. Paul Schmidt
    www.Bullschmidt.com - Freelance Web and Database Developer
    www.Bullschmidt.com/DevTip.asp - Classic ASP Design Tips

  • #2
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Dont know about being able to change the href of the "a" tag maybe its possible in IE6.

    However you could store the url in a variable then change that variable depending on certain events. so......
    Code:
        <script>
        ...
            var theURL = "www.google.com";
        ...
        </script>
    
        <a href="javascript:document.location=theURL" >Other Page</a>
    
        <!-- other stuff that will change variable -->
    The word javascript in the href should be 1 word, for some reason its getting formated and display as two words on this forum, stange!
    Last edited by ellisd5; 08-26-2003 at 10:26 AM.
    Dale Ellis
    __________________

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    478
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thanks for the good answer Dale.

    The reason I wanted it to be a modified anchor tag is so that the user would still have the option of right-clicking and saving the target as...

    So do you know of any JavaScript that can do the same thing as right-clicking on a link and saving target as?

    The reason for this is that the site is for a songwriter who wants to put .mp3 files on the Web and let users listen to the song or download the song. And there is a listbox because there are various song lengths involved and the user can choose one.
    J. Paul Schmidt
    www.Bullschmidt.com - Freelance Web and Database Developer
    www.Bullschmidt.com/DevTip.asp - Classic ASP Design Tips

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    try something based on

    var link ="otherpage1.htm";
    document.write('<a href = \"+link+'\" ...............>')

    and whichever function to change the variable link on event.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This should work...

    Code:
    <script type="text/javascript">
      function update()
      {
         document.getElementById("link").href = document.f.s.value;
         return;
      }
    </script>
    
    <form name="f">
      <select name="s" onchange="update();">
        <option value="1.mp3">1.mp3</option>
        <option value="2.mp3">2.mp3</option>
        <option value="3.mp3">3.mp3</option>
      </select>
    
      <a href="1.mp3" id="link">Right Click -> Save Target As...</a>
    </form>
    Hope that helps you out.
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    478
    Thanks
    0
    Thanked 2 Times in 2 Posts
    fredmv,

    Thanks a lot for your great answer about having a listbox alter the href of a link! I tried it and it works!
    J. Paul Schmidt
    www.Bullschmidt.com - Freelance Web and Database Developer
    www.Bullschmidt.com/DevTip.asp - Classic ASP Design Tips

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, no problem. Happy that helped you out.
    Moderator @ WebDeveloper.com
    Mentor @ WebXpertz.net

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    cross-browser solution:

    Code:
    <script type="text/javascript">
      function update(objS)
      {
         document.links["link"].href = objS.options[objS.selectedIndex].value;
      }
    </script>
    ...
    <form name="f">
      <select name="s" onchange="update(this);">
        <option value="1.mp3">1.mp3</option>
        <option value="2.mp3">2.mp3</option>
        <option value="3.mp3">3.mp3</option>
      </select>
    
      <a href="1.mp3" name="link">Right Click -> Save Target As...</a>
    </form>

  • #9
    Regular Coder
    Join Date
    Aug 2003
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Might try fiddling with this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    function processclick(oLink) {
         var oSelect = document.forms.songform.elements.songlist;
         oLink.href = oSelect.options[oSelect.selectedIndex].value;
         return true;
    }
    
    </script>
    </head>
    <body>
    <form name="songform">
    <select name="songlist">
      <option value="BMs.mp3">Bite Me (short version)</option>
      <option value="BMd.mp3">Bite Me (dance version)</option>
      <option value="BMl.mp3">Bite Me (2 hrs.)</option>
    </select>____<a href="BMs.mp3" onclick="return processclick(this)"><font face="comic sans ms">play me!</font></a>
    </form>
    </body>
    </html>
    Last edited by cheesebag; 08-27-2003 at 05:01 PM.
    &nbsp;........ another wild guess ........

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    using document.execCommand('SaveAs') will save the current document not a particular link.
    So the code I posted is I think the better solution. You just have to inform the user that if he wants to save the file instead of running it, he should right-click the link and choose "Save Target As..."

  • #11
    Regular Coder
    Join Date
    Aug 2003
    Posts
    383
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, wasn't aware of that. Modified the above, still prefer it to Glenn's. Don't think you should inform the user of a specific Internet Explorer procedure - there are alternative methods of saving links (and lots of musicians use Macs).
    &nbsp;........ another wild guess ........

  • #12
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would like to contribute how I used this discussion:

    My goal was to change the popup window address upon an action in a webpage that was being generated by PHP interpreter:


    I changed the code of the function like this:
    Code:
    //update links
    function update(objS)
    {
    document.links["varlink"].href = objS.href; //options[objS.selectedIndex]
    }
    And I change the lines of html document like this:
    Code:
    <a name="varlink" ... >
    
    <script language="javascript">
    document.write('<?php echo '<a name="varlink" href="javascript:popupWindow ...>
    
    <a href="javascript:popupWindow('<?php echo 'http://www.
    ; update(this); return false;"
    Sorry if it is confusing. I could not paste the rest of the code.

    Encouragements,
    Last edited by cordoval; 05-03-2008 at 06:43 AM.


  •  

    Posting Permissions

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