how do I get the form data in a javascript object so I can send it as the data parameter of an $.ajax call

Question

How to return json after form.submit()?

 <form id="NotificationForm" action="<%=Url.Action("Edit",new{Action="Edit"}) %>" method="post" enctype="multipart/form-data" onsubmit='getJsonRequestAfterSubmittingForm(this); return false;'>
      <%Html.RenderPartial("IndexDetails", Model);%>
     </form>

 $.ajax({
        url: '<%=Url.Action("Edit","Notification") %>',
        type: "POST",
        dataType: 'json',
        data: $("#NotificationForm").submit(),
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result.Result == true) {
                alert("ghjghsgd");
            }
        },
        error: function(request, status, error) {
            $("#NotSelectedList").html("Error: " & request.responseText);
        }

    });

-1. Please try to add more detail to your question. If you expect people to spend more than 10 seconds answering, you should spend at least a few minutes explaining your problem in more detail. — Andy E, May 18 '10 at 11:14
I deleted my answer. Your actual question is: how do I get the form data in a javascript object so I can send it as the data parameter of an $.ajax call. — Jan Willem B, May 18 '10 at 11:32

score 2 · Answer 1 · edited May 23 '17 at 10:32

I guess what you're actually looking for is not the Submit method, but how to serialise the form data to a json object. To do this you have to use a helper method like here: Serialize form to JSON

Use this instead of running the submit() method, and you'll be fine. Also, this question is a duplicate of this (even though the question text, and the title are completely misleading): Serialize form to JSON with jQuery

Posting the jQuery extender, just in case, so that it doesn't get lost :)

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

After you have this in your page, you can update your ajax call with this:

$.ajax({
        url: '<%=Url.Action("Edit","Notification") %>',
        type: "POST",
        dataType: 'json',
        data: $("#NotificationForm").serializeObject(),
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result.Result == true) {
                alert("ghjghsgd");
            }
        },
        error: function(request, status, error) {
            $("#NotSelectedList").html("Error: " & request.responseText);
        }

    });

UPD: If you want to POST the form, then get the response as a json object, and do another ajax call.. then you should look at the jquery.form plugin. you will be able to post your form using an ajax call, then get the response, and run some js when it will return.

Is it possible to return json after the data: ("#NotificationForm").submit(); My aim here is to submit the form and retrieve json after the submission. The part where I use ("#NotificationForm").submit(); is working fine, but it then falls in the error...why? — learning, May 18 '10 at 12:19
To be completely honest - looking at what you're trying to achieve here, you're just doing it wrong.. I think you should rethink your process there =/ I updated the post with some info that would help you anyway :) — Artiom Chilaru, May 18 '10 at 12:48

how do I get the form data in a javascript object so I can send it as the data parameter of an $.ajax call

1 Answers1