HTML select box to download files

Tech /

Just recently I wanted to have a simple HTML select element where the user should be able to click on a specific option to download a certain file. I came up with a solution that contains some JavaScript and straight forward HTML markup.

The HTML markup consists of a simple HTML select element that triggers a certain JavaScript function via the onChange hook. The JavaScript function in turn just sets the window.location to the given file and so the browser starts downloading.

<script type="text/javascript">
function download(d) {
        if (d == 'Select document') return;
        window.location = 'http://example.com' + d;
}
</script>
 
<select name="download" onChange="download(this.value)">
<option>Select document</option>
<option value="a_file.pdf">A PDF document</option>
<option value="another_file.pdf">Another PDF document</option>
</select>

This technique can be used to jump to any page you want, e.g. you may use a select box instead of a large menu on your page. It helps you to include information – e.g. a long list – in a page with the compact select dropdown box that can be placed almost everywhere without consuming much space.

24 thoughts on “HTML select box to download files”

  1. Andy

    This is exactly what I was looking for – thanks a lot! 🙂
    I will be using this to trigger picture downloads in certain resolutions for my photo-blog.

  3. Andy

    Thanks! 🙂 Still working on it though, but getting the downloads to trigger via a select box was a major element I wanted to have and your select box code fits perfectly. 🙂

  4. Jonathan Ashcraft

    I looked for hours for a plug-in for WordPress and this worked just great. I’m using it so people can select the size of wallpaper they want to download and it’s terrific! Thanks!
    (I never post thank you notes on people’s sites. You are a life saver!)

    P.S. can you tell me how I can make it so that the image downloads in a new window instead of the same window? Thanks!

  7. Christian Schenk

    Dear Dave,
    you can try replacing the line with window.location in the JavaScript with the window.open function. This should do the trick but you should read up on popup blockers that might prevent this.

  8. Dave

    Thanks so much Christian! That worked perfectly. I am not having issues with a pop up blocker here except on IE. Chrome and Firefox seem to be fine. I am not finding any solutions… do you have ideas?

    Thanks for your help, really appreciate it!!

  9. Christian Schenk

    Hi Dave,
    I couldn’t find a solution but if you really require to open the files in a new window maybe going back to standard links with the target set to _blank will help. Do not forget to adjust the Doctype definition accordingly since _blank isn’t part of XHTML and newer.

  10. Lynda

    Everything worked great with the drop down selector! Yeah!
    I’m trying to get the files to open in a new window and I tried replacing the window.location with window.open and it didn’t work. Is there something else I should do or try?

  13. Christian Schenk

    Hi Josh,
    if you want a download button you don’t need this solution. Simple use a-Elements linking to the files the user may download and style the a-Elements looking like buttons using CSS. To do the latter you’ll find a lot of information on the web that’ll help you with that.

  14. Josh

    HI Christian,

    Thanks for the quick reply. I understand how to use an anchor tag as a single download but I’m looking to have a select box with multiple files (ie: image1.jpg, image2.jpg and image3.jpg) but with a single download button. So you would make your choice with the select box and then proceed to the download button.

  15. Christian Schenk

    Hi Josh,
    I would have suggested a form that contains the select-Element with all the corresponding files as options and a PHP script responsible for the download. This way you would submit the form using the single button and the PHP script would send the selected file to the client.
    After a quick search at SO I found a solution that uses jQuery and looks nice as well – you might want to check this out too.

  16. Josh

    Hi Christian
    Thanks for the info, I ended up using a little jquery and got everything working properly.

  17. Tyler

    This is great! Is there any way to have more than one of these on the page? Multiple selects from different download folders? Thanks

  18. Christian Schenk

    Hi Tyler,
    sure you can add as many selects to a single page as you may need. If you want to do that simply duplicate the download function and rename subsequent functions to something else, e.g. function download2. When adding the other select elements rename the call to the function in the onChange attribute as well like so onChange="download2(this.value)".

  19. Morten

    Hey
    It is possible that the first does not become a link?
    I use it as a title, but if I click on it after I have downloaded a file I get sent to a 404 page.

  20. Christian Schenk

    Hi Morten,
    in the above example I used Select document as the first element and I guess you’ve changed that to another title of the select box as you say. If you check out the corresponding JavaScript code you can see the if statement which says that if the value of the currently selected field is Select document simply skip the remainder of the function and do nothing at all.
    Here’s an example. Say, you’ve got two select boxes on your page one for cars and another one for animals.

    <select name="download" onChange="download(this.value)">
<option>Select a car</option>
<option value="porsche.pdf">Porsche</option>
<option value="bmw.pdf">BMW</option>
</select>
 
<select name="download" onChange="download(this.value)">
<option>Select an animal</option>
<option value="tiger.pdf">Tiger</option>
<option value="wolf.pdf">Wolf</option>
</select>

    Along with that you would add the JavaScript code and would add multiple if statements which take care of the two different first elements in the select boxes.

    <script type="text/javascript">
function download(d) {
  if (d == 'Select a car') return;
  if (d == 'Select an animal') return;
  window.location = 'http://example.com' + d;
}
</script>

    By changing the if statement accordingly you can set the first or any element that should be ignored to a certain text as you see fit. I hope this helps you setting up something like this – even with multiple select boxes – on your website.

  22. Christian Schenk

    Hi DS,
    sure, you can simply create a link to a certain file as well. In case you’ve got a lot of files a drop down box with the mentioned JavaScript function can be a handy substitute for a long list of simple links.

  23. JC

    Hi Christian,

    your drop down select was just what I was looking for. I too was trying to get it to open in a new window and have come up with a solution you may want to post as I see others have also asked the same question.

    Here is the changed code:

    <script type="text/javascript">
function download(d) {
  if (d !== '') {
    window.open('http://www.yourdomain.com/documents/' + d,'_blank');
  }
}
</script>
 
<select name="download" onChange="download(this.value)">
<option value="">Select document</option>
<option value="document1.pdf">A PDF document</option>
<option value="document2.pdf">Another PDF document</option>
</select>

    One thing I noticed is that it won’t work if you put the select box inside form tags. Might be a good idea to mention that and best to put the script in the head section of the page.

  24. Rafael Nagai

    Hi JC,
    well done – it works perfectly 🙂

    Christian,
    great article, good job! Thanks for share and support all of us!

    Nagai

Comments are closed.