CODEWITHSUNDEEP
jqueryhtmlform-submit
Omu
Omu

Reputation: 71208

jQuery: submit form after a value is selected from dropdown

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?

Upvotes: 26

Views: 70457

Answers (6)

Shedrack
Shedrack

Reputation: 743

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

This solved my problem efficiently.

Upvotes: 0

xPheRe
xPheRe

Reputation: 2343

In case your html contains more than one form

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

Upvotes: 6

RoToRa
RoToRa

Reputation: 38400

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();
    });
});

Upvotes: 78

user2628
user2628

Reputation:

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

Upvotes: 2

gen_Eric
gen_Eric

Reputation: 227240

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

Upvotes: 6

Darin Dimitrov
Darin Dimitrov

Reputation: 1038810

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

Upvotes: 1

Related Questions