Asp.Net MVC 4, Form submit not working

Question

I have a simple Asp.Net MVC 4 Chat application. Below the chat session is initialized, I ask the user to enter the name and once the user enters his name (and other details not shown in below code) and presses on the "Start Chat" button, the Action method ChatForm is called from the Chat controller.

Code snippet for the chat form is as shown below:

@model WebSite.ViewModel.SimpleForm

using (Html.BeginForm("ChatForm", "Chat", FormMethod.Post, new { id = "anonymousChat" }))
{
<div class='form-group'>
    @Html.LabelRequiredFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>
<input type="submit" class='btn btn-block start-anonymous-chat' value="Start Chat" />
}

The ChatForm method is as shown below:

public ActionResult ChatForm(SimpleForm model)
{
      /*Some processing is done here and finally the below values are returned*/

      return Json(new { success = true, chatId=chatRequest.Id, compId=company.Id });
}

Now the problem is after executing this function, i get the below line on the browser:

{"success":true,"chatId":10734,"compId":109}

The method executed on click of the submit button is:

$("#anonymousChat").submit(function () {
            debugger;
            if ($("#anonymousChat").valid())
                $.ajax({
                    type: this.method,
                    url: this.action,
                    data: $(this).serialize(),
                    success: function (data) {

                        if (data.success) {
                            /*show the chat modal*/
                            chatModal.modal("show");

                        }
                        else {
                            console.log("failed");
                            $("#anon-chat-form").html(data);
                        }
                    }
                });

            return false;
        });

Also if i try to put any alert message or console messages within the method $("#anonymousChat").submit, then neither the alter is popped-up nor the console messages or being printed.

Has anyone been hit by similar problem before? Is so how did you solve it?

Thanks in advance.

its obvious that your call is not entering in the success method. update the ajax call by adding error method then you can catch the error — Optimus, Oct 19 '15 at 09:59
check this link its shows how to trace ajax error.. .http://stackoverflow.com/questions/2833951/how-to-catch-ajax-query-post-error — Optimus, Oct 19 '15 at 10:02
@Optimus, What has the (obsolete) `Ajax.BeginForm()` method got to do with _pure MVC_? — , Oct 19 '15 at 10:09
try using this function instead of your submit `$(document).on('submit', '#anonymousChat', function (e) {});` — kbaccouche, Oct 19 '15 at 10:10

score 1 · Answer 1 · answered Oct 19 '15 at 10:23

The alert is not showing up, so the submit event is not triggered.

If your form is dynamically added to the DOM then the $("#anonymousChat").submit(function () {} won't trigger anything because the form does not exist yet when the page loads. Try changing your code like this to avoid this problem:

$(document).on('submit', '#anonymousChat', function (e) {
  debugger;
        if ($("#anonymousChat").valid())
            $.ajax({
                type: this.method,
                url: this.action,
                data: $(this).serialize(),
                success: function (data) {

                    if (data.success) {
                        /*show the chat modal*/
                        chatModal.modal("show");

                    }
                    else {
                        console.log("failed");
                        $("#anon-chat-form").html(data);
                    }
                }
            });

        return false;
});

If it stil does not work maybe your problem is much simpler than that, maybe you just didn't reference the javascript file.

score 0 · Answer 2 · answered Oct 19 '15 at 10:01

0

your form ID is "myChat" however you're referencing "anonymousChat" in your JavaScript, believe this might be causing your issues

answered Oct 19 '15 at 10:01

Kallen

18
4

Asp.Net MVC 4, Form submit not working

2 Answers2