1

I want to create an HTML page that consists of a <select> option list, and a submit button with it. There are 3 options in the list and I want that when one option is selected and the submit button is pressed, it should open a specific page. Whereas when other option is selected, it should open a different page. Basically I want each option to open one page. How can I do the linking part with one button?

By searching I understood that I will have to use PHP for this, but I am not getting an appropriate code for it.

Here is my HTML <select> element structure.

<div>
  <h1>SELECT A TOPIC</H1>
  <select>
  <option value="physics">physics</option>
  <option value="maths">maths</option>
  <option value="chemistry">chemistry</option>
  </select> 
  <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>

I want this button to open 3 different links.

Also is there any other way that these options in the list can open pages? I learned that href tag does not work here, since only selecting an option cannot open a page. I need a submit button anyways.

1

2 Answers 2

3

You can achieve that using JavaScript:

<div>
  <h1>SELECT A TOPIC</h1>
  <select id="select">
    <option value="physics">physics</option>
    <option value="maths">maths</option>
    <option value="chemistry">chemistry</option>
  </select>
  <button type="button" id="submit" style="font-size: 20px;">Submit</button>
</div>
<script>
const map = {
    physics: 'physics url'
 ,maths: 'maths url'
 ,chemistry: 'chemistry url'
}
document.getElementById('submit').addEventListener('click', () =>
  location.href = map[document.getElementById('select').value])
</script>
3
  • This is what exactly I was looking... there was another I tried but that was jquery and it was conflicting . so this is the best solution for this I have got. Thanks for this Mar 3, 2018 at 11:59
  • Thank you Michal Perlakowski this solved my question too!!!
    – Jean
    Aug 21, 2018 at 17:04
  • Hello Mr.Michal, How can I open links in new tab ? Apr 21, 2021 at 14:11
0

The drawbacks aside, assuming you really wanted to do it, you can just do it the way you would with normal form handling (i.e. with post or get). You forgot to indicate form action and method above btw. Then you can just access selection by $_POST["submit_element_name"].

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .