jQuery: submit form after a value is selected from dropdown

Question

I have this form in my HTML:

<form action="/awe/ChangeTheme/Change" method="post">

    <select id="themes" name="themes">
        ...
        <option value="blitzer">blitzer</option>
    </select>

    <input type="submit" value="change" />

</form>

Anybody knows how to submit it when a value is selected in the 'themes' dropdown?

Wane

Answer 1

The other solutions will submit all forms on the page, if there should be any. Better would be:

$(function() {
    $('#themes').change(function() {
        this.form.submit();
    });
});

Subtropics

If you have multiple forms it would be even better if you replace the third line with: $(this).parent('form').submit(); – Nolte

@PeterdeRidder this.form already does that and more, because $(this).parent('form') only works if the form is the direct parent of the select, which it often isn't. – Subtropics

Answer 2

$('#themes').change(function(){
    $('form').submit();
});

Adenaadenauer

Answer 3

In case your html contains more than one form

$(function() {
  $('#themes').on('change', function(e) {
    $(this).closest('form')
           .trigger('submit')
  })
})

Oquendo

Answer 4

I recommend using the longhand bind method because it has the same effect as the shorthand supplied by the other answers, but you can add additional events if need be without having to change your code.

$("#themes").bind("change", function() {
  $("form").trigger("submit");
});

Kajdan

Answer 5

$(function() {
    $('#themes').change(function() {
        $('form').submit();
    });
});

Ammoniacal

Answer 6

$(function() {
   $('#your_select_field_id').on('change', function(e) {
      $('#your_form_id').submit();
   })
})

This solved my problem efficiently.

Almonte