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

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

• javascript
• jquery
• asp-mvc
• forms

• remove this code ** event.preventDefault(); ** – ravi2432 Commented Jul 18, 2017 at 17:23
• @ravi2432 That isn't the issue (and, that line es after the alert() anyway). The issue is that the form never gets submitted in the first place so the event never fires. – Scott Marcus Commented Jul 18, 2017 at 17:27

4 Answers 4

change action and make it blank and change function like this

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

and it will work

That's because, while you can change the selected element in the drop down (thus causing the first alert() to fire), you have no mechanism for submitting the form, so the second one doesn't.

You need to add a submit button so that the submit event of the form can be triggered.

Also, the way you have the code, the submit event handler won't actually fire unless you change your selection in the drop down first. You probably don't want that behavior. The two event handlers should be set up independent of each other.

$("#SelectedMonth").change(function () {
   alert(this.value);
});

$('form').submit(function (event) {
  alert("Submitted");
  event.preventDefault();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post">
  <select id="SelectedMonth" name="SelectedMonth">
    <option>7/1/2017</option>
    <option>6/1/2017</option>
  </select>
  <button type="submit">Submit</button>
</form>

you are putting the submit event inside change event try and also add a submit button to submit the event

$("#SelectedMonth").change(function () {
         alert(this.value); 
    });

$('form').submit(function (event) { 
         event.preventDefault();
 alert("Submitted");
         });

if you want to submit on date chaneg then try this

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

    $('form').submit(function (event) { 
             event.preventDefault();
     alert("Submitted");
             });

The answer to the question "why it does not work" is that .submit(function(){}) not actually submits form but add submit handler - function that will be executed when form will be submitted

This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.

Description: Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.

So if you pass function to it, it will BIND handler. When you will trigger it without params, it will actually submits form.

You dont need button to submit form.

So actually code must be something like this

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