HTML select box to download files

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 comments ↓

  • Andy says:
    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.
  • Hi Andy,
    that’s great to hear and I’m glad I could help. Btw, you’ve got a great website, looking really fine!
  • Andy says:
    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. :)
  • 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!

  • Hi Jonathan,
    I’m glad I could help you. Unfortunately, I haven’t found a solution to your issue but if you come up with something please let me know.
  • Dave says:
    is there a way to make the document open in a new window? (_blank)?
  • 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.
  • Dave says:
    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!!

  • 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.
  • Lynda says:
    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?
  • Hi Lynda,
    please see my previous reply to Dave’s comment: I’ve had a look at this again but couldn’t find a solution for this issue. Sorry.
  • Josh says:
    Works perfectly but how would I change it so that there is a download button?
  • 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.
  • Josh says:
    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.

  • 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.
  • Josh says:
    Hi Christian
    Thanks for the info, I ended up using a little jquery and got everything working properly.
  • Tyler says:
    This is great! Is there any way to have more than one of these on the page? Multiple selects from different download folders? Thanks
  • 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)".
  • Morten says:
    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.
  • 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.

  • DS says:
    Why not just ?

    FILE1

    A lot easier than creating a page full of JS functions.

  • 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.
  • JC says:
    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.

  • Rafael Nagai says:
    Hi JC,
    well done – it works perfectly :)

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

    Nagai