JavaScript Coder

Submit a form on select onchange

javascript submit form javascript submit form onchange select javascript submit on select

Step 1: Create a Form and Dropdown

Create an HTML form that includes a dropdown menu with options. Give your form an id so that it can be easily targeted with JavaScript later.

<form action="https://show.ratufa.io" method="post" id="myForm">
<select id="myDropdown" class="form-select" name="dropdown">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
</form>

Step 2: Add Event Listener to Dropdown

Add an event listener to the dropdown menu that listens for a change in its value. When a change is detected, the JavaScript function will submit the form.

const dropdown = document.getElementById("myDropdown");

dropdown.addEventListener("change", function() {
  
  document.getElementById("myForm").submit();
});

All Code together

That’s it! Your form will now submit when an option is selected from the dropdown menu.

See Also

Categories