How do you link to a document selected in a HTML select statement?

I have a list of documents that can be chosen from a list (see HTML below). Is there a way to link to the selected document when the "View" button is clicked? I confess that I am a novice at开发者_开发问答 HTML coding. Thanks in advance for any suggestions you can provide.

<form name="frmDocs" method="post">
   <select name=docs style='width:auto'>
       <option value="1">Document 1</option>
       <option value="2">Document 2</option>
       <option value="3">Document 3</option>
       <option value="4">Document 4</option>                    
       <option value="5">Document 5</option>
   </select>
   <input value="View" type=submit>
</form>

---

You can do this from the client side using JavaScript or the server side using your scripting language of choice. Since your question doesn't indicate what kind of server you're using, I'll give the client-side answer.

Also, if you've not yet discovered jQuery, you most definitely want to. Take a look at the getting started guide.

Using jQuery:

$('form[name=frmDocs] input[type=submit]').click(funciton() {
    location.assign($('form[name=frmDocs] select[name=docs]').val());
});

You also need to change the value of each select element to the URL you want to redirect to.

If you assign IDs to your HTML elements...

<form name="frmDocs" method="post">
   <select id="docs" name="docs" style="width:auto">
       <option value="page1.html">Document 1</option>
       <option value="page2.html">Document 2</option>
       <option value="page3.html">Document 3</option>
       <option value="page4.html">Document 4</option>                    
       <option value="page5.html">Document 5</option>
   </select>
   <input id="submit" value="View" type="submit">
</form>

...then your code become simpler: (since id must be unique, whereas names are not necessarily unique)

$('#submit').click(funciton() {
    location.assign($('#docs').val());
});

---

Obviously, you could link to the documents by listing them as a list of links, rather than a form field:

<ul>
    <li><a href="URL_OF_DOCUMENT_1"></a>Document 1</li>
    <li><a href="URL_OF_DOCUMENT_2"></a>Document 2</li>
    <li><a href="URL_OF_DOCUMENT_3"></a>Document 3</li>
    <li><a href="URL_OF_DOCUMENT_4"></a>Document 4</li>
    <li><a href="URL_OF_DOCUMENT_5"></a>Document 5</li>
</ul>

However, for the functionality you’ve described, you either need:

1) a server-side script that re-directs the user to the URL of the selected document when the form is submitted; or

2) some JavaScript that changes the browser window’s URL to that of the selected document when the form is submitted (see e.g. Josh’s answer).

---

With PHP:

<?php
    $docs = (isset($_POST['docs']) && is_numeric($_POST['docs'])) ? (int)$_POST['docs'] : 0;

    $pages = array(
        '0' => 'index.html',
        '1' => 'page1.html',
        '2' => 'page2.html',
        '3' => 'page3.html',
        '4' => 'page4.html',
        '5' => 'page5.html'
    );

    if (in_array($docs, $pages)) { header('Location: ' . $pages[$docs]); }
?>

---

I got the page working using the HTML postback method using code similar to the above answer:

If you assign IDs to your HTML elements...

Document 1 Document 2 Document 3 Document 4 Document 5

I will have to explore some of the other options shown using Java or PHP. There is much to learn. Thank you again for all your answers and help!!! Much appreciated.