How can I add a function to each option in my form? (HTML, JS)-CodePudding

<div >
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select  id="exampleFormControlSelect1" >
  <option value="1">Image Rollover</option> 
  <option value="2">Image Preview</option>
  <option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">

In my form when I select an option and submit, I would each option to allow me to do what the option entails,(open an image, create a document.write(),make an image rollover, etc). How can I create a function in each option when I select it and submit? (If my question requires more clarification, please let me know)

CodePudding user response：

you need to add onchange event in select and do whatever you want to do on change of value.

<div >
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select  id="exampleFormControlSelect1" onchange="yourFunction()">
  <option value="1">Image Rollover</option> 
  <option value="2">Image Preview</option>
  <option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">

CodePudding user response：

Just add onchange event in select and create a function to handle it.

<div >
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select  onchange="handleSelectChange()" id="exampleFormControlSelect1" >
  <option value="1">Image Rollover</option> 
  <option value="2">Image Preview</option>
  <option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">

You can refer to the document here: https://www.w3schools.com/jsref/event_onchange.asp