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

Question

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?

Provide a testcase that exhibits the issue, so that we can answer you without wild guessing — Lightness Races in Orbit, Aug 31 '11 at 18:02
Make sure your button doesn't have a name or id attribute of "submit", I've seen this as interfering before. — GBa, Aug 31 '11 at 18:03
http://stackoverflow.com/questions/6736341/why-is-form-submit-not-working — SLaks, Aug 31 '11 at 18:06
As a general rule, auto-submitting forms when a control changes is a really bad idea from a usability and accessibility standpoint. See [WCAG - F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is given a value](http://www.w3.org/TR/WCAG20-TECHS/F36.html) and [WCAG - G13: Describing what will happen before a change to a form control that causes a change of context to occur is made](http://www.w3.org/TR/WCAG20-TECHS/G13.html) — steveax, Aug 31 '11 at 18:09
Check your browser's javascript error log. this.form.submit() is standard Javascript so it should work. — Matthew Lock, May 11 '13 at 02:49

score 55 · Accepted Answer · answered Aug 31 '11 at 18:01

You should be able to use something similar to:

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

SLaks · Answer 2 · 2011-08-31T18:14:51.327

25

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.

edited Aug 31 '11 at 18:14

answered Aug 31 '11 at 18:02

SLaks

868,454
176
1,908
1,964

1

@Tomalak: I'm just guessing. This has come up several times before; it matches his problem perfectly. – SLaks Aug 31 '11 at 18:04
1

OK; perhaps your answer should say "**Perhaps** your submit button is named `submit`". – Lightness Races in Orbit Aug 31 '11 at 18:07
No, @Tomalak, Much cooler to assume the likely situation :) Makes you look like a star when the asker hits his forehead ;) – mplungjan Aug 31 '11 at 18:09
2

@mplungjan: It also fails to teach them about how they did not provide ample information in their question. – Lightness Races in Orbit Aug 31 '11 at 18:10
@Tomalak: True. I would hope that they would realize that anyway, though. – SLaks Aug 31 '11 at 18:11
@SLaks: Were that the case, I think they would have done it right in the first place! – Lightness Races in Orbit Aug 31 '11 at 18:11
5

@mplungjan: Not at all. The perfect answer, I think, is like SLaks's, but with a "But I am only guessing because you did not provide any sort of testcase nor ample information in your question" at the end. :) – Lightness Races in Orbit Aug 31 '11 at 18:12
You're right. I think this edit drives the point home more strongly. – SLaks Aug 31 '11 at 18:15

score 10 · Answer 3 · answered Aug 31 '11 at 18:01

10

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

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

answered Aug 31 '11 at 18:01

Tejs

40,736
10
68
86

score 5 · Answer 4 · answered Sep 07 '14 at 18:51

5

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

answered Sep 07 '14 at 18:51

Blair Anderson

19,463
8
77
114

1

This is the best answer. You don't always have to do *everything* in jQuery - you can mix'n'match where appropriate. – Dan Diplo Apr 04 '17 at 15:26

score 0 · Answer 5 · answered Sep 17 '14 at 07:12

0

Use :

<select onchange="myFunction()">

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

answered Sep 17 '14 at 07:12

Wasif Shahjahan

346
2
9

score 0 · Answer 6 · answered Aug 31 '11 at 18:03

0

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

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

answered Aug 31 '11 at 18:03

pimvdb

151,816
78
307
352

1

@mplungjan: But he's talking about `$().trigger`. I assume he's already using jQuery. – pimvdb Aug 31 '11 at 18:07
2

argh, @mplungjan edited his comment as I +1'd the original. >.< Please don't do that; if you're changing the content of your comment, write a new one and delete the original instead. – Lightness Races in Orbit Aug 31 '11 at 18:08
1

Ok. Apologies. I only changed it because the asker actually DID use jQuery... The impact of my change was small - from No, jQuery is not needed to submit onchange, to if jQuery is already used :) – mplungjan Aug 31 '11 at 18:12

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

6 Answers6

Linked