CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcforms
John S
John S

Reputation: 8351

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

Upvotes: 3

Views: 23134

Answers (4)

SeRRgIO
SeRRgIO

Reputation: 167

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

Upvotes: 0

DEarTh
DEarTh

Reputation: 1005

change action and make it blank and change function like this

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

and it will work

Upvotes: 2

RAHUL S R
RAHUL S R

Reputation: 1579

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

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65853

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.com/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>

Upvotes: 0

Related Questions