How to Submit Form on Change of Dropdown List

How to submit form on change of dropdown list?

Just ask assistance of JavaScript.

<select onchange="this.form.submit()">
    ...
</select>

See also:

• HTML dog - JavaScript tutorial

HTML Submit form on dropdown change

Add:

<form action="test.php" method="post">

To method2 and it should work fine.

Submit form on change of dropdown list in Semantic UI?

Because you are using GET method you can redirect with javascript by constructing the url yourself.

$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
    location.href = 'http://example.com/?nutr_code=' + value;
}});

Second option is changing the input field 'nutr_code' with the value from the callback as shown above

$('input[name="nutr_code"]').val(value);

and submit the <FORM/> from js.

$('form').submit();

EDIT:
Example of second option.

$('.ui.dropdown').dropdown({
'onChange': function (value, text, $choice) {
    // Uncomment if semantic is not updating the input before submit.
    //$('input[name="nutr_code"]').val(value);
    $('form').submit();
}});

How to Submit Form on Select Change

Your form is missing an action value, which prevents submitting the form at the end. But in the mid-time you should correct this code:

$(document).ready(function() {
  $('#cars').on('change', function() {
     document.forms[myFormName].submit();
  });
});

You can also submit a form by triggering submit button click event:

$(document).ready(function() {
  $('#cars').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});

Submit form on change of dropdown

Try like this

@Html.DropDownList("PaymentFormModel.CardType", cardTypes, new { required = "required", @onchange="submitform();" })

Here is the script for it:

function submitform()
{
  $('form').submit();
}

hope it helps

Dropdown Select Form, Go to URL On SUBMIT

Try this instead.

Also: You'll want to keep your JavaScript separated from your HTML. Do not use onchange or similar HTML attributes. While it's technically not wrong, it's bad from a code quality/maintainability perspective.

var goBtn = document.getElementById("goBtn");var menu = document.getElementById("menu");
goBtn.onclick = function() {  window.location = menu.value;}

<select id="menu">  <option selected="selected">Select One</option>  <option value="http://www.domain-one.com">London</option>  <option value="http://www.domain-two.com">Glasgow</option></select><input type="button" id="goBtn" value="GO!">

function myFunction(new_id) {
  if (new_id == 0) {
    return;
  }
  document.getElementById("submit").name = new_id;
  alert(document.getElementById("submit").name);
}

<select id="select" name="select" class="btn btn-block gray dropdown-toggle" required onchange="myFunction(this.value)">
  <option Disabled value="0" selected="selected">- Select Me -</option>
  <option value="5"> 5</option>
  <option value="10"> 10</option>
</select>
<button type="submit" id="submit" name="">Button</button><br>

<?php
$sorting = '';
if(isset($_GET['sort'])){
   $sorting = $_GET['sort'];
}
?>
<select name="sort" id="myselect" onchange="sort(this.value);">
    <option value="pop" <?php if($sorting == 'pop'):?>selected="selected"<?php endif;?>>Sort by Popularity</option>
    <option value="lh"  <?php if($sorting == 'lh'):?> selected="selected"<?php endif;?>>Sort Low - High</option>
    <option value="hl"  <?php if($sorting == 'hl'):?> selected="selected"<?php endif;?>>Sort by High - Low</option>
</select>

<script type="text/javascript">
  function sort(option){

   window.location = window.location.pathname+'?sort='+option;
}
</script>

if($_GET['sort']){
  switch($_GET['sort']){
      case 'pop': /* ... Your Code..*/
      break;
       case 'lh': /* ... Your Code..*/
       break;
      case 'hl': /* ... Your Code..*/
       break;
      default:
      /* ... Your Code..*/
  }


}