MVC 4 Ajax Post not working

Question

@using(Html.BeginForm("About", "User", FormMethod.Post , new { id="aboutme"}))
{
    <fieldset>
          <ul>
            <li> <label class="block">About me</label> @Html.TextAreaFor(m=>m.About.AboutMe)</li>
            <li> <input type="button" id="submit" class="input-button" /> </li>
          </ul>
    </fieldset>
}

<script type="text/javascript">
    $(function () {
        $('#submit').click(function () {

            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // The AJAX call succeeded and the server returned a JSON
                    // with a property "s" => we can use this property
                    // and set the html of the target div
                    alert(result.s);
                    $('#ShowResultHere').html(result.s);
                }
            });
            // it is important to return false in order to
            // cancel the default submission of the form
            // and perform the AJAX call
            return false;
        });
    }); 
</script>

When i debug this, action URL becoming /User/undefined.

How can i fix it?

McGarnagle · Accepted Answer · 2012-10-06 19:09:52Z

4

The this keyword refers to the source of the event, which is the submit button in this case. You want the form, so try this (using JQuery traversing):

url: $(this).closest("form").prop("action"),
type: $(this).closest("form").prop("method"),
data: $(this).closest("form").serialize()

The alternative would be to use <input type='submit' class='input-button' /> instead of the button, and listen for the event $("#aboutme").submit (that way this would actually refer to the form, as your code assumes).

answered Oct 6, 2012 at 19:09

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

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

Comments

coffeeyesplease · Accepted Answer · 2012-10-08 14:58:58Z

1

As an alternative attr function, to get the value of the attribute http://api.jquery.com/attr/ and also, jQuery has a shorthand for ajax post, $.post http://api.jquery.com/jQuery.post/ so your code could end like this

$("#submit").click(function(event){
    event.preventDefault();
    $.post($("#aboutme").attr("action"), $("#aboutme").serialize(), function (data) {
        if (data != null) {
            alert(result.s);
            $('#ShowResultHere').html(result.s);
        }
    });
});

answered Oct 8, 2012 at 14:58

coffeeyesplease

1,0289 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:27:54Z

0

Alternatively you could use the Ajax.BeginForm method instead, which lets you set a update target for any html returned.

Example: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Oct 6, 2012 at 19:21

Betty

9,1892 gold badges38 silver badges53 bronze badges

Collectives™ on Stack Overflow

MVC 4 Ajax Post not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related