Javascript select onchange='this.form.submit()'

I have a form with a select and a few text inputs. I'd like the form to be submitted when the select is changed. This works fine using the following:

onchange="this.form.submit()"

However, if the form also contains a submit button, then the form does not submit when the select is changed. I'm guessing some kind of conflict.

What are my options here?

Should I use something like $(this.form).trigger("submit") instead?

Answers:

Answer

You should be able to use something similar to:

$('#selectElementId').change(
    function(){
         $(this).closest('form').trigger('submit');
         /* or:
         $('#formElementId').trigger('submit');
            or:
         $('#formElementId').submit();
         */
    });
Answer

My psychic debugging skills tell me that your submit button is named submit.
Therefore, form.submit refers to the button rather than the method.

Rename the button to something else so that form.submit refers to the method again.

Answer

If you're using jQuery, it's as simple as this:

 $('#mySelect').change(function()
 {
     $('#myForm').submit();
 });
Answer

There are a few ways this can be completed.

Elements know which form they belong to, so you don't need to wrap this in jquery, you can just call this.form which returns the form element. Then you can call submit() on a form element to submit it.

  $('select').on('change', function(e){
    this.form.submit()
  });

documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer

Bind them using jQuery and make jQuery handle it: http://jsfiddle.net/ZmxpW/.

$('select').change(function() {
    $(this).parents('form').submit();
});
Answer

Use :

<select onchange="myFunction()">

    function myFunction() {
        document.querySelectorAll("input[type=submit]")[0].click();
    }

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.