Downloadable Drop-down boxes?

[EvanLugh]

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

 

[angelwatt]

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.

 

[EvanLugh]

Thanks for the informative post. Do you perhaps know of any sites with examples of code. Thanks

 

[angelwatt]

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:

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

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.
  }
}

 

[EvanLugh]

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:

 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.

 

[angelwatt]

That 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,

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.

 

[EvanLugh]

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