1 submit button but 2 actions to be performed based on the selection from dropdown in javascript-CodePudding

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

CodePudding user response：

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");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const selectElement = form.querySelector("#dropdown");
  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");
  }
});

CodePudding user response：

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