javascriptjqueryasp.net-mvcforms

Using JQuery to submit form

I have the following form on a page:

<form action="/" method="post">
<select id="SelectedMonth" name="SelectedMonth">
<option>7/1/2017</option>
<option>6/1/2017</option>
</select>
</form>

I am trying to use the following jquery snippet to submit the form. The jquery code resides outside of the form and the form is the only form on the page.

 $("#SelectedMonth").change(function () {
         alert(this.value);
         $('form').submit(function (event) {
         alert("Submitted");
         event.preventDefault();
         });
    });

The first alert is triggered and shows the selected value but the submit is never triggered.

It seems like this is pretty straight forward but it is not working. What am I missing?

TIA

Solution

  • change action and make it blank and change function like this

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

    For multiple forms use id

    <form id="myForm"><input type="text"/></form>

    $("#SelectedMonth").change(function () {
     $('form#myForm').submit();
});

    and it will work