Downloadable Drop-down boxes?

Discussion in 'Web Design and Development' started by EvanLugh, Feb 23, 2008.

  1. EvanLugh macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #1
    It's one thing i've never been able to find out.
    See: http://www.sydneydancecompany.com/feed.shtml

    Notice how you can select different applications, click download and it'll work? I'm assuming it's using a get function but i can't find anything else on it.

    Thanks :eek:
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    It's not that hard really, just done with JavaScript. A form is setup for each download spot. When a drop down menu changes it activates the onchange event, which updates a variable containing a URL. Then when the download button is clicked the JavaScript uses a location.href statement to activate that URL.
     
  3. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #3
    Thanks for the informative post. Do you perhaps know of any sites with examples of code. Thanks :)
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I don't know of any tutorials off hand, but here's some code I've put together. If you have any questions about the code or have a specific need you can't figure out how to accomplish, just let me know. Also note that users will have to have JavaScript enabled to activate the download, which may exclude some visitors.

    HTML:
    HTML:
    <form id="dlForm" onsubmit="GoToUrl(this.id)">
    <select id="select-1">
      <option value="blue">Blue</option>
      <option value="green">Green</option>
    </select>
    <select id="select-2">
      <option value="cat">Cat</option>
      <option value="dog">Dog</option>
    </select>
    <input type="submit" value="Download" />
    </form>
    JavaScript:
    Code:
    var ext = '.jpg';
    function GoToUrl(id)
    {
      // identify by form id. Helpful if there's more than one form on page
      if (id == 'dlForm') {
        s1 = document.getElementById('select-1').value;
        s2 = document.getElementById('select-2').value;
        location.href = s1 +"/"+ s2 + ext; // send user to new url (for download)
    //    alert(s1 +"/"+ s2 + ext); // use this line to test what URL will be.
      }
    }
     
  5. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #5
    From what i understood from that:

    the top area of code would have the options blue and green. Another check box with cat and dog, with the JS adding the extension .js. Which i assume has to be in the same directory?

    dlForm has been taken as the form ID in the HTML to the JS.

    The only areas i'm having problems with are:
    Code:
     s1 = document.getElementById('select-1').value;
        s2 = document.getElementById('select-2').value;
        location.href = s1 +"/"+ s2 + ext; // send user to new url (for download)
    //    alert(s1 +"/"+ s2 + ext); // use this line to test what URL will be.
      }
    }
    Could you perhaps add /index.php or whichever url, will help me distinguish the s1,s2 etc.
    Thankyou for your help so far, very much appreciated.

    EDIT: if you have the time and you don't mind, could you perhaps base it on "http://www.sydneydancecompany.com/feed.shtml" angelwatt? Not a problem if not, I've got english dyslexia and even though I can code fine, this is a new-one on me. Thankyou sincerely.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    That code,
    Code:
    s1 = document.getElementById('select-1').value;
    s2 = document.getElementById('select-2').value;
    location.href = s1 +"/"+ s2 + ext;
    will access: blue/cat.jpg which is the blue folder and an image named cat.jpg. So if the HTML was being run from htp:ww.sydneydancecompany.om/ the JavaScript would access htp:ww.sydneydancecompany.om/blue/cat.jpg (Purposely broke links so search engines don't crawl them.)

    It was just example code. If you want to have a base URL to work with then you can do,
    Code:
    var base = 'http://www.sydneydancecompany.com/';
    var ext = '.jpg';
    function GoToUrl(id)
    {
      // identify by form id. Helpful if there's more than one form on page
      if (id == 'dlForm') {
        // get value attribute from first select tag
        s1 = document.getElementById('select-1').value;
        // get value attribute from second select tag
        s2 = document.getElementById('select-2').value;
        // send user to new url (for download)
        location.href = base + s1 +"/"+ s2 + ext;
        // use this line to test what URL will be.
    //    alert(base + s1 +"/"+ s2 + ext);
      }
    }
    If you want to test to see what it does, comment out the location.href line and uncomment the alert one. This'll let you see what URL the JavaScript will send the visitor to.
     
  7. EvanLugh thread starter macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #7
    Brilliant, think i've got it. I'm going for tea now so when i'm back i'll give it a shot. I'm assuming they're just going in the same html/php file. Thank you very much for your help :eek: :) :D
     

Share This Page