how to submit the form values using ajax call, without using submit button

Question

I am developing MVC application.

I want to submit the form using ajax function, not using standard submit button click event.

I want to pass object of the model along with string array (which is not related to object of the model.)

I have below code in Create View

@using (Html.BeginForm("Create", "AdviceCreate", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate", onsubmit = "disableSubmitButton()" }))

{ }

  $('#create').click(function () {

            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            var obj = '@Html.Raw(Json.Encode(Model))';



            $.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
                JSON.stringify({ 
                    AdviceCreateVM : obj,
                    InvoiceDetails : invoiceDetailsArray,
                    LedgerDetails  : ledgerDetailsArray

                }),              
                success: function () {

                }
            });
        });

and below code in controller

public ActionResult Create(AdviceCreateVM AdviceCreateVM, string[] InvoiceDetails, string[] LedgerDetails)
 {
}

but in controller, AdviceCreateVM comes as NULL ...

what is missing ?

show the output of obj coz i guess you are outputing string and the model binder can't bind the type to AdviceCreateVM — Idrees Khan
– Idrees Khan, Commented Sep 9, 2014 at 11:51
what does this var obj = '@Html.Raw(Json.Encode(Model))'; returns? — Idrees Khan
– Idrees Khan, Commented Sep 9, 2014 at 11:56
can you try with jQuery.parseJSON() and see if you get the valid return for obj = $.parseJSON('@Html.Raw(Json.Encode(Model))'); — codebased
– codebased, Commented Sep 9, 2014 at 11:57

SSA · Accepted Answer · 2014-09-09 13:42:29Z

1

If I understand you, you want to manually submit a form on a button click and along with it,you want to supply extra data.

Edit: Corrected some mistakes. here is working Example in .Net Fiddle check console.log output in fiddle. Removed content-Type, as we are customizing it, jquery ajax will auto detect it.

$('#create').click(function (e) {

            e.preventDefault(); 
            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            //If you have validation attached, then you need to validate the form first and before submit if form is valid. 

            var obj =$("#frmCreate").serializeArray(); //serializeArray gives you a name,value object
            //Append extra data to above name/value collection,   
            obj.push({name: 'InvoiceDetails', value: invoiceDetailsArray});
            obj.push({name: 'LedgerDetails', value: ledgerDetailsArray});

            $.ajax({

                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
               obj,              
                success: function () {

                }
            });
        });

edited Sep 9, 2014 at 13:42

answered Sep 9, 2014 at 12:54

SSA

5,4834 gold badges39 silver badges52 bronze badges

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

1 Comment

bnil Over a year ago

Thanks for your efforts...but still at controller level, object doesn't contain any values all properties are blank...

codebased · Accepted Answer · 2014-09-09 11:49:50Z

1

Normally I do this:

var postData = $("#form1").serializeArray();

$.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data: postData

                success: function () {

                }
            });

answered Sep 9, 2014 at 11:49

codebased

7,08311 gold badges57 silver badges90 bronze badges

3 Comments

bnil Over a year ago

No, I want to send the object and array separately , because, I make array run time...

user3559349 Over a year ago

@user1650894, Your can use var data = $('#myForm').serializeArray(); and add additional data using data.push({InvoiceDetails: 'invoiceDetailsArray', LedgerDetails: ledgerDetailsArray});

codebased Over a year ago

About to say that... mate push push push :)

Idrees Khan · Accepted Answer · 2014-09-09 12:46:57Z

0

your view is rendered before your button click function is called (becuase you are making client side call). so your code

var obj = '@Html.Raw(Json.Encode(Model))';

is null becuase Model is comming null from controller. So as you are saying, you are getting the values from dynamic textboxes, then the right way is to get the data on client side (i.e using jQuery or javascript) and manually make a javascript array and pass it to the server or you have to catch the data on serverside in controller after the form is posted to the server.
Inshort, if you are thinking the code;

var obj = '@Html.Raw(Json.Encode(Model))';

will get the data after client side click, then you are on the wrong track.

answered Sep 9, 2014 at 12:46

Idrees Khan

7,76218 gold badges65 silver badges112 bronze badges

1 Comment

bnil Over a year ago

thanks for the explanation... then what the solution for it ?

Collectives™ on Stack Overflow

how to submit the form values using ajax call, without using submit button

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related