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

See the Pen Submit form using Javascript (using fetch api)

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

See Also

Categories