window.location to the given file and so the browser starts downloading.
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”
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.
that’s great to hear and I’m glad I could help. Btw, you’ve got a great website, looking really fine!
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!
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.
is there a way to make the document open in a new window? (_blank)?
you can try replacing the line with
window.openfunction. This should do the trick but you should read up on popup blockers that might prevent this.
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!!
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
_blankwill help. Do not forget to adjust the Doctype definition accordingly since
_blankisn’t part of XHTML and newer.
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?
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.
Works perfectly but how would I change it so that there is a download button?
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.
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.
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.
Thanks for the info, I ended up using a little jquery and got everything working properly.
This is great! Is there any way to have more than one of these on the page? Multiple selects from different download folders? Thanks
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 functionand rename subsequent functions to something else, e.g.
function download2. When adding the other select elements rename the call to the function in the
onChangeattribute as well like so
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.
ifstatement 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.
ifstatements which take care of the two different first elements in the select boxes.
By changing the
ifstatement 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.
Why not just ?
A lot easier than creating a page full of JS functions.
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:
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.
well done – it works perfectly 🙂
great article, good job! Thanks for share and support all of us!
Comments are closed.