CODEWITHSUNDEEP
htmlforms
rachael
rachael

Reputation: 15

Creating a form which selects a downloadable file

I'm wanting to create a form which has a one drop down - these dropdowns reference a file which the customer can then download upon selecting.

I'm unsure of the best way to go about this to do it and haven't found anything to help after a few hours of searching for something

Here's what I have so far:

<form action="">
    <select>
        <option value="/downloads/file1.pdf">File 1</option>
        <option value="/downloads/file2.pdf">File 2</option>
        <option value="/downloads/file3.pdf">File 3</option>
        <option value="/downloads/file4.pdf">File 4</option>
        <option value="/downloads/file5.pdf">File 5</option>
    </select>
    <input value="Download" class="grey-btn" />
</form>

Upvotes: 1

Views: 11317

Answers (4)

user1909426
user1909426

Reputation: 1668

if I understood correctly, this should do what you're asking for:

First update your HTML to this:

<form method="POST" action="dl-file.php">
    <select id="filename" name="filename">
        <option value="file1.pdf">File 1</option>
        <option value="file2.pdf">File 2</option>
        <option value="file3.pdf">File 3</option>
        <option value="file4.pdf">File 4</option>
        <option value="file5.pdf">File 5</option>
    </select>

    <input type="submit" value="Download" class="grey-btn" />
 </form>

Then create a new file in the same directory that the HTML file is in and call it dl-file.php and put this inside it:

<?php
    // Put any files you don't want the user to download here
    $exclude_files = array('.htaccess', '.DS_STORE', '.htpasswd');

    // full path to the download directory
    $download_directory = 'C:\xampp\htdocs\test\filedlselect/downloads/';

    $file_to_download = filter_input(INPUT_POST, 'filename', FILTER_SANITIZE_STRING);

    $full_path = $download_directory . $file_to_download;

    if (!in_array($file_to_download, $exclude_files) && 
        file_exists( $full_path ) && is_readable( $full_path )) {
        header('Pragma: public');
        header('Expires: 0');
        header('Cache-control: must-revalidate, post-check=0, pre-check=0');
        header('Last-modified: ' . gmdate('D, d M Y H:i:s', filemtime($full_path)) . 'GMT');
        header('Cache-control: private', false);
        header('Content-type: application/force-download');
        header('Content-disposition: attachment; filename="' . basename($full_path) . '"');
        header('Content-Transfer-Encoding: binary');
        header('Content-Length: ' . filesize($full_path));
        header('Connection: close');
        readfile($full_path);
        exit;
    } else {
        die('invalid file');
    }
?>

Third, edit the $download_directory to contain where exactly on your hard drive the /downloads/ folder is. Optionally you can add files to the $exclude_files array.

Upvotes: 0

BornKillaz
BornKillaz

Reputation: 602

Try like this:

With jQuery:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <title>Download</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="dwl">
<option value="/downloads/file.pdf">File 1</option>
<option value="/downloads/file2.pdf">File 2</option>
<option value="/downloads/file3.pdf">File 3</option>
<option value="/downloads/file4.pdf">File 4</option>
<option value="/downloads/file5.pdf">File 5</option>
</select>
<input type="button" onclick="window.location.href=$('#dwl').val()" value="Download" class="grey-btn" />
</body>
</html>

Or, just pure JavaScript:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <title>Download</title>
<body>
<select id="dwl">
<option value="/downloads/file.pdf">File 1</option>
<option value="/downloads/file2.pdf">File 2</option>
<option value="/downloads/file3.pdf">File 3</option>
<option value="/downloads/file4.pdf">File 4</option>
<option value="/downloads/file5.pdf">File 5</option>
</select>
<input type="button" onclick="window.location.href=document.getElementById('dwl').value" value="Download" class="grey-btn" />
</body>
</html>

Upvotes: 1

vvolkov
vvolkov

Reputation: 1212

You can use code like this:

<form onsubmit="this.action = document.getElementById('filename').value">
    <select id="filename">
        <option value="/downloads/file1.pdf">File 1</option>
        <option value="/downloads/file2.pdf">File 2</option>
        <option value="/downloads/file3.pdf">File 3</option>
        <option value="/downloads/file4.pdf">File 4</option>
        <option value="/downloads/file5.pdf">File 5</option>
    </select>
    <input type="submit" value="Download" class="grey-btn" />
</form>

Upvotes: 4

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to put a name on your select in order to hook into it with JavaScript easily.

<select name="files">

Then you need an event on your button to call a function:

<input value="Download" onclick="download()" class="grey-btn" />

JS function:

function download() {
    //get the filename from the selected item
    var sel = document.forms[0].files[document.forms[0].files.selectedIndex].value;
    //redirect to this file
    document.location = sel;
}

Upvotes: 1

Related Questions