<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Christian Schenk&#187; html</title>
	<atom:link href="http://www.christianschenk.org/blog/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.christianschenk.org</link>
	<description>Writing about my experiences with technology and all different kinds of projects and experiments</description>
	<lastBuildDate>Sun, 29 Aug 2010 09:08:16 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>HTML select box to download files</title>
		<link>http://www.christianschenk.org/blog/html-select-dropdown-download-files/</link>
		<comments>http://www.christianschenk.org/blog/html-select-dropdown-download-files/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 07:55:43 +0000</pubDate>
		<dc:creator>Christian Schenk</dc:creator>
				<category><![CDATA[Tech]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[dropdown]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.christianschenk.org/?p=744</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>The HTML markup consists of a simple HTML select element that triggers a certain JavaScript function via the <code>onChange</code> hook. The JavaScript function in turn just sets the <code>window.location</code> to the given file and so the browser starts downloading.</p>
<p><span id="more-744"></span></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #000000; font-weight: bold;">function</span> download<span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>d <span style="color: #339933;">==</span> <span style="color: #0000ff;">'Select document'</span><span style="color: #009900;">&#41;</span> <span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
        window<span style="color: #339933;">.</span>location <span style="color: #339933;">=</span> <span style="color: #0000ff;">'http://example.com'</span> <span style="color: #339933;">+</span> d<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>select name<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;download&quot;</span> onChange<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;download(this.value)&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option<span style="color: #339933;">&gt;</span>Select document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;a_file.pdf&quot;</span><span style="color: #339933;">&gt;</span>A PDF document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>option value<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;another_file.pdf&quot;</span><span style="color: #339933;">&gt;</span>Another PDF document<span style="color: #339933;">&lt;/</span>option<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>select<span style="color: #339933;">&gt;</span></pre></div></div>

<p>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 &#8211; e.g. a long list &#8211; in a page with the compact select dropdown box that can be placed almost everywhere without consuming much space.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.christianschenk.org/blog/html-select-dropdown-download-files/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
