How to Submit Form on Select Change

Question

I have the following form. I'd like it to be submitted automatically via jQuery when the user makes a selection, without needing to press the submit button. How do I do this?

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

adeneo, I tried your suggestion but it's still not working. Here's the complete code, anything wrong?

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#cars').on('change', function() {
                this.form.submit();
            });
        });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <select name="id" id="cars">
                <option value="">Select...</option>
                <option value="1">Toyota</option>
                <option value="2">Nissan</option>
                <option value="3">Dodge</option>
            </select> 
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>

Sigismundus · Accepted Answer · 2015-01-24T06:01:07.287

22

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

edited Jan 24 '15 at 06:01

answered Jan 24 '15 at 04:18

Sigismundus

635
4
15

I changed it to action="page.php" which is the page's name, and it still doesn't submit the form. – Rick Helston Jan 24 '15 at 04:44
I have listed two working solutions, let me know if it helped. – Sigismundus Jan 24 '15 at 06:03
1

This is how I did it (thanks to above.) - $("#areaSelected").on("change", function () { $('#search').click(); }); I have a 'submit' button on the page called 'search' which is fired from 'onchange'. – Jon649 Aug 20 '18 at 13:45
An empty action value submits the form to the page it is on. – V_RocKs Oct 21 '21 at 05:39

score 10 · Answer 2 · answered Feb 15 '16 at 20:38

In my case, this works perfectly well, and it works with or without the submit button.

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
</form>

 <script type="text/javascript">

  jQuery(function() {
    jQuery('#car').change(function() {
        this.form.submit();
    });
});
</script>

Works for me in CoffeeScript, but I'm using `$('#car').change ->`. — Joshua Pinter, Sep 15 '17 at 17:29

score 8 · Answer 3 · answered Aug 09 '19 at 21:57

8

An even quicker version of the code would look something like.

<form action="" method="post">
    <select name="id" id="cars" onchange="javascript:this.form.submit()">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

Now what we are doing is adding onchange="javascript:this.form.submit()" to any field that you want the submit action to fire on. Of course this only works on elements that support the onchange html property

answered Aug 09 '19 at 21:57

Akah

1,389
14
19

I also think you can use this for any property that triggers an action – Akah Aug 09 '19 at 22:00
There's not a lot of reason to use jQuery for this, I use this method, unless someone forces me to use jQuery. – Halfstop Jan 04 '21 at 21:27

score 7 · Answer 4 · answered Dec 03 '19 at 11:21

7

Just use assistance of JavaScript.

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

answered Dec 03 '19 at 11:21

Asad Ullah

453
4
8

score 3 · Answer 5 · answered Sep 07 '17 at 19:12

I know this is a bit old (and already answered), but none of the answers was quite as flexible as I wanted, so below is the solution I ended up with:

$(document).ready(function() {
   $('#cars').change(function() {
     var parentForm = $(this).closest("form");
     if (parentForm && parentForm.length > 0)
       parentForm.submit();
   });
});

score 2 · Answer 6 · answered Jan 24 '15 at 07:20

even you can do this one:

<form action="" method="post">
<select name="id" id="cars">
    <option value="">Choose</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Dodge</option>
</select> 
<input id='submit' type="submit" name="submit" value="Submit">

$(document).ready(function() {
   $('#cars').on('change', function() {
     $('#submit').click();

   });
});

score 0 · Answer 7 · answered Apr 21 '20 at 02:02

My solution is create hidden submit button and click it on change event .

 <select name="id" onchange="javascript:$('#submit').click();">
 <option value="0">Please Select Web Site</option>
 <option value="1">------</option>
 <option value="2">-------</option>
 </select>
 <button id="submit" class="hidden" type="submit" name="submit" value="Submit"/>

How to Submit Form on Select Change

7 Answers7

Linked