How to link a HTML <select> list with a submit button

Question

I have a webpage which consists of a select list with 6 options, along with a submit button.

I need to code it in such a way that when one option is selected in the list and the submit button is clicked, it should open another linked page, whereas when another option is selected and submit button is clicked it should open some another page.

Basically I want each option to open some linked page when the submit button is clicked.

By googling a bit, I understood that I have to use php for this but I am not getting the appropriate code for the same.

I do not want the submit button to open only 1 specific page. Rather,I want it to open 6 different pages corresponding to different options selected.

Code Snippet :

   <div>

   <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>

    <select>

   <option value=""></option>
   <option value="physics">physics</option>
   <option value="chemistry">chemistry</option>
    <option value="biology">biology</option>
    <option value="maths">maths</option>
     <option value="cs">cs</option>
     <option value="electrical">electrical</option>

      </select>
      <br>

   <input class="SubmitButton" type="submit" name="SUBMITBUTTON"              value="Submit" style="font-size:20px; " />
  </div>

Also i have learnt that it cannot be done using href tag because an option list cannot directly open pages, a submit button is required to perform an action.

Need help to resolve this.

Answer 1

Simplest solution based on jquery :-

<div>

  <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>

  <select id ="dropDownId"> <!-- give an id to select box-->

      <option value="">Select Option</option>
      <option value="physics">physics</option>
      <option value="chemistry">chemistry</option>
      <option value="biology">biology</option>
      <option value="maths">maths</option>
      <option value="cs">cs</option>
      <option value="electrical">electrical</option>

  </select>
  <br>
  <input class="SubmitButton" type="submit" name="SUBMITBUTTON"  value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click

    var urldata = $('#dropDownId :selected').val(); // get the selected  option value
    window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});

</script>

Note:- This code will do below things:-

1.Select box page is never refreshed.

2.Based on selected value your URL'S are open in new window.

3.Also you can change URL format according to your requirement. I just gave a sample example.

Answer 2

I think ts wants to open multiple window according to selected values. So here is example:

<div>
    <H1>SELECT An subject:</H1>
    <form id="link">
        <select multiple="multiple">
            <option value="">Choose links</option>
            <option value="http://stackoverflow.com/">Stackoverflow</option>
            <option value="http://google.com/">Google</option>
            <option value="http://yahoo.com/">Yahoo</option>
            <option value="http://bing.com/">Bing</option>
            <option value="http://php.net/">PHP official</option>
            <option value="http://w3c.org">W3C</option>
        </select>
        <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
    </form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
    $('#link').on('submit', function (e) {
        e.preventDefault();
        var $form = $(this),
                $select = $form.find('select'),
                links = $select.val();
        if (links.length > 0) {
            for (i in links) {
                link = links[i];
                window.open(link);
            }
        }
    });
</script>

First, you must set multiple attribute to select. Then via jquery you can open each link in new popup. Be careful browsers may block this popups.

UPDATE If you want to open just one window, you can use @Anant's solution

Answer 3

Add this script in your html code

function showPage() {
  var sel = document.getElementById('subjects');

  var option = sel.options[sel.selectedIndex].value;

  window.open(option + ".html");
}

and copy below html code and replace with yours

<select id="subjects">

    <option value=""></option>
    <option value="physics">physics</option>
    <option value="chemistry">chemistry</option>
    <option value="biology">biology</option>
    <option value="maths">maths</option>
    <option value="cs">cs</option>
    <option value="electrical">electrical</option>

</select>

<input class="SubmitButton" type="button" value="Submit" onclick="showPage()"  style="font-size:20px; " />

hope this helps :)

Answer 4

You can do this with PHP, but you will need to do 2 things:

1. Put the select and input into a form in your HTML, like this:

    <form action="" method="post"> <select name="opt"> <option value="1">Link 1</option> <option value="2">Link 2</option> <!-- etc --> </select> <input type="submit" name="submit">Submit</input> </form>

2. Have PHP catch the form's POSTed data and redirect to the appropriate page, like this: (put this at the top of your PHP page with the form)

    <?php if (isset($_POST['submit'])) { if (isset($_POST['opt'])) { if ($_POST['opt'] == '1') { header('Location: page1.php'); } elseif ($_POST['opt'] == '2') { header('Location: page2.php'); } // etc... } } ?>

Header redirects only work if there has been no HTML output before they're called, so make sure there's no HTML code before the PHP code block.