I need to have one submit button but it needs to perform 2 different actions based on the value selected from the dropdown.
The dropdown has values "Order","Search","Alerts".
When I select Order and then submit it should redirect the way it is i.e, submitForm () should trigger.
When I select Search and then submit it should redirect to a different return URL or return Form.
. How should I returnForm or the return URL in javascript? How do I differentiate between the click.?
The file is completely a HTML and js file
You can use an event listener on the form element to listen for submit event of the form, then every time the form is submitted you can get the current value of the select element and use an if/else if statement or even a switch case (in this example I'm using if and else if statement) to call tasks based on the select element's value.
HTML:
<form>
<select name="dropdown" id="dropdown">
<option value="order">Order</option>
<option value="search">Search</option>
<option value="alerts">Alerts</option>
</select>
<button type="submit">submit</button>
</form>
JAVASCRIPT:
const form = document.querySelector("form");
const selectElement = form.querySelector("#dropdown");
form.addEventListener("submit", (event) => {
event.preventDefault();
if (selectElement.value === "order") {
// Do stuff for order
console.log("Completed tasks for order");
} else if (selectElement.value === "search") {
// Do stuff for search
console.log("Completed tasks for search");
} else if (selectElement.value === "alerts") {
// Do stuff for alerts
console.log("Completed tasks for alerts");
} else {
console.log("Do nothing");
}
});
If I got you right, you can use a switch-case or just a regular if-elseif-else statement for that based on the value of the select tag