Send form to controller in ajax

Question

This is my form

<form id="postProblemForm" action="/Problems/Post"  method="post" enctype="multipart/form-data">
            <input type="text" id="problemSubject" name="problemSubject" class="inp-form"/>
            <input type="file" id="uploadFile" name="uploadFile"/>
            <textarea rows="" cols="" class="form-textarea" id="problemDescription" name="problemDescription"></textarea>
            <input type="submit" value="Post" id="btnPostProblem"  style="width:70px;"/>

    </form>

following is JS

$("#postProblemForm").submit(function (event) {
                event.preventDefault();
                var $this = $(this);
                var url = $this.attr('action');
                var dataToSend = $this.serialize();
                var callBack = function (isPosted) {
                                    if (isPosted) { alert("posted successfully"); } }
                $.get(url,dataToSend,callBack);

            });

Following is Controller code

[HttpPost]
        public bool Post(FormCollection form) 
        {
            string subject = form["problemSubject"];
            string description = form["problemDescription"];
            var image = WebImage.GetImageFromRequest();

            return true;

        }

But controller method is not being called. Plese help.

Darin Dimitrov · Accepted Answer · 2013-04-23 06:23:49Z

1

You cannot upload files using AJAX. I see that your form contains a file input but this won't work with AJAX. Also you are using a $.get whereas you probably wanted to $.post the contents. Another issue with your action is that it should return an ActionResult and not boolean types. For example you could return a JsonResult for tat matter.

If you want to be able to upload files with your form you could use a client side upload plugin such as Uploadify, Fine Uploader or the jQuery.form plugin.

Here's for example how your code might look like with the jQuery.form plugin:

$('#postProblemForm').ajaxForm(function(isPosted) {
    if (isPosted) { 
        alert('posted successfully');
    }
});

answered Apr 23, 2013 at 6:23

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

3 Comments

Fakhar uz Zaman Over a year ago

Ok its fine. But i want client side validation, then have to send form to controller. What should be done?

Darin Dimitrov Over a year ago

Client side validation has absolutely nothing to do with AJAX. Those are 2 different notions. You could perfectly fine have client side validation enabled and still leave the form submit as a regular form. For example let's suppose that you wanted the problemSubject field to be required. Just decorate your view model's property with the [Required] attribute and then use a helper to generate the field instead of hardcoding it as you did: @Html.EditorFor(x => x.ProblemSubject). Then include a corresponding validation placeholder: @Html.ValidationMessageFor(x => x.ProblemSubject).

Darin Dimitrov Over a year ago

... and finally include the jquery.validate.js and jquery.validate.unobtrusive.js scripts.

von v. · Accepted Answer · 2013-04-23 06:23:30Z

0

You're doing a GET on a controller method that accepts a POST request. You need to change it to:

$.post(url,dataToSend,callBack);

answered Apr 23, 2013 at 6:23

von v.

17.1k5 gold badges62 silver badges89 bronze badges

Collectives™ on Stack Overflow

Send form to controller in ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related