ASP.Net MVC Submitting Ajax Form Via JQuery

Question

I have an Ajax form that updates a div when submitted with a submit button this works fine. However I want to remove the submit button and have the form submit automatically when a user changes a selection in a drop down list.

I wrote the following JQuery for this in the dropdown change event

$("#SummaryFilterForm").submit();

The problem with this is that is does not trigger the onSubmit event of the form causing the render partial to render to a new page and not into a div in the current window.

How can I make the JQuery submit the form and also trigger the onsubmit event?

Thanks

Answer 1

How do you submit the Ajax request? If you use $.Ajax you can use this:

  function connectDropdown() {

    $("select#drpFilter").unbind('change').change(function() {

      $.ajax({
        type: "POST",
        url: "/YourController/YourAction",
        data: {
          YourParameter: someValue,

        },
        dataType: "json",
        success: function(result) {
          alert('works like a charm');
          //update div here
        }
      });
    });
    }

Answer 2

<form name="SummaryFilterForm" id="SummaryFilterForm" onsubmit="connectDropDown(this); return false;">

You can replace 'connectDropDown()' with whatever function you want to call and pass your form into it so you can retrieve your values.