Search code examples
phphtmllisthrefsubmit-button

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


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.


Solution

  • 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