submitting an asp.net MVC 3 form using jquery ajax

Question

I am working on ASP.NET MVC 3 application and I have a jquery dialogue with Ok button. On click of OK I want to submit a form using jquery AJAX.

My ajax call looks like this:

$("#free-trial").dialog({
   autoOpen: false,
   autoResize: true,
   buttons: {
       "OK": function () {
           if (notvalid()) {
               $(".ui-dialog-titlebar").hide();
               $("#dialog-freetrial-insufficientdata").dialog({ dialogClass: 'transparent' });
               $("#dialog-freetrial-insufficientdata").dialog("open");
           }
           else {
               $('#frmCreateTrialAccount').live('submit', function (e) {
                   e.preventDefault();
                   $.ajax({
                       cache: false,
                       async: true,
                       type: "POST",
                       url: $(this).attr('action'),
                       data: $(this).serialize(),
                       success: function (data) {
                           alert(data);
                       }
                   });
               });
               jQuery(this).dialog('close');
           }
       }
   },
   open: function () {
       $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
       $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
   }

});

where as form looks like this:

@using (Html.BeginForm("CreateTrialAccount", "Home", FormMethod.Post, 
              new { Id = "frmCreateTrialAccount" } ))
{

}

and controller action looks like this:

[HttpPost]
public JsonResult CreateTrialAccount(FormCollection form) {
    return Json("dummy data");
}

but form is not submitted on this method.

I have these files included in layout page:

<link href="@Url.Content("~/Content/css/smoothness/jquery-ui-1.10.0.custom.css")" rel="stylesheet" type="text/css"  media="screen"/>
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Please suggest me solution to this.

Look like everything is fine. Have you checked that the submit event is hit? Do an alert or console.log in $('#frmCreateTrialAccount').live('submit',. — von v.
– von v., Commented May 2, 2013 at 13:27

von v. · Accepted Answer · 2013-05-02 14:22:49Z

3

Oh sorry for that comment I made, your issue is that you are binding the form's submit action where you should have been submitting it already. If you want to bind the form's submit then declare it outside $("#free-trial").dialog({. Then you can have the ajax post method in a separate function so you can call it in both the binding code and in the $("#free-trial").dialog({.

var form = $('#frmCreateTrialAccount');
$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
        alert(data);
    }
});

So just to make it clear remove the following lines of code:

$('#frmCreateTrialAccount').live('submit', function (e) {
e.preventDefault();
// and the ending 
});

edited May 2, 2013 at 14:22

answered May 2, 2013 at 13:37

von v.

17.1k5 gold badges62 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DotnetSparrow Over a year ago

Hi von: Thanks for the response. If I remove that then a popup opens on click of Ok button with all the html of the page. Just to make things clear, Ok button is not inside the form. It is jquery ui dialog Ok button and form is located on jquery ui dialog

von v. Over a year ago

Yes I understand where the OK button is. What I don't understand is why would "all the html page" would show up. The ajax post will happen if if (notvalid()) is NOT true. And when the post happens you are just alerting the result, at least for now. Unless you are writing out the result of the post, which you have not shown in your code. Have you tried it btw?

DotnetSparrow Over a year ago

Hi Von: I am not writing out anything. Controller action is just returning json which i posted in question and success method alerts it

von v. Over a year ago

Okay so what is the problem with my suggestion? And have you tried it already and what's the issue with it if you had?

DotnetSparrow Over a year ago

In ajax call I am using url: $(this).attr('action'), data: $(this).serialize(), what does $(this) means, I think it should be form id ?

|

Collectives™ on Stack Overflow

submitting an asp.net MVC 3 form using jquery ajax

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related