How to Submit Form on Select Change

K

8

26

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>

Korwun answered 24/1, 2015 at 3:37 Comment(0)

E

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

Esthonia answered 24/1, 2015 at 4:18 Comment(4)

I changed it to action="page.php" which is the page's name, and it still doesn't submit the form. – Korwun 24/1, 2015 at 4:44

I have listed two working solutions, let me know if it helped. – Esthonia 24/1, 2015 at 6:3

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'. – Teahouse 20/8, 2018 at 13:45

An empty action value submits the form to the page it is on. – Computer 21/10, 2021 at 5:39

P

10

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>

Palate answered 15/2, 2016 at 20:38 Comment(1)

Works for me in CoffeeScript, but I'm using $('#car').change ->. – East 15/9, 2017 at 17:29

S

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

Serval answered 9/8, 2019 at 21:57 Comment(2)

I also think you can use this for any property that triggers an action – Serval 9/8, 2019 at 22:0

There's not a lot of reason to use jQuery for this, I use this method, unless someone forces me to use jQuery. – Zaxis 4/1, 2021 at 21:27

W

7

Just use assistance of JavaScript.

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

Worldwide answered 3/12, 2019 at 11:21 Comment(0)

S

3

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

Serosa answered 7/9, 2017 at 19:12 Comment(0)

S

2

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

   });
});

Spook answered 24/1, 2015 at 7:20 Comment(0)

P

0

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"/>

Prayer answered 21/4, 2020 at 2:2 Comment(0)

M

0

My code to submit a form with jquery without a submit button with the change event on a select element:

<script>
$(function () {
    $("#select123").on("change", function() {
        $(this).closest('form').submit();
    });
});
</script>

Montevideo answered 19/3 at 21:36 Comment(0)

Recommended topics

Hot tags