How to open file based on HTML form entries

Question

I have two separate fields with a drop-down list, one is for User and the second Data. Then I have a button, which would ideally work as an output of the selection of the two drop-down lists. The form should retrieve the file that is relevant to the selection. The file to be opened has always the following format so I was hoping to make use of that: _.csv

Here's the simplified version of what I'm using:

<td align="left"><!-- User/data selector -->
  <table border="0">
    <tbody>
      <tr>
        <th align="left">User:</th>
        <td>
        <select name="users" id="users">
        <option value="user1">User 1</option>
        <option value="user2">User 2</option>
        <option value="user3">User 3</option>
        </select>
        </td>
      </tr>
      <tr>
        <th align="left">Data:</th>
        <td>
        <select name="data" id="data">
        <option value="data1">Data 1</option>
        <option value="data2">Data 2</option>
        <option value="data3">Data 3</option>                    
        </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type='button' value='Generate Report' onClick='newWindow();'/></td>
      </tr>
    </tbody>
  </table>

So, what I'm struggling with is to know what to write in the function newWindow() to get the needed 'User' and 'Data' selection to get the correct file. Can you help?

Much appreciated!

Please remember to also accept the answers that solved your previous questions, if there has been such an answer. — Xavi López, Oct 19 '11 at 10:49
It worked, I didn't come back to my question until today. thanks for the help! — janecs, Oct 20 '11 at 13:01

score 0 · Accepted Answer · edited May 23 '17 at 12:18

You could get the values of those <select> fields with document.getElementById(id).value, where id would be data or users, in order to make up the csv file name.

The openWindow function could look like:

function openWindow(){
    var users = document.getElementById('users').value;
    var data = document.getElementById('data').value
    var fileName =  users + "_" + data + ".csv";
    var pathToFiles = "/whateverdirectory/";

    window.open(pathToFiles + fileName, fileName);
}

Also, remember you shouldn't be using <table>s for layout, they're meant for displaying tabular data. It is recommended to use <div>s instead.

You might also find this blog entry useful: Using the window.open method.

How to open file based on HTML form entries

1 Answers1