Jquery form post Issues

Question

I am using asp.net MVC and I am having an issue posting a form using jquery. It is not posting to the url I am telling it to. If I use firebug, it shows the post happening but it is posting to the index of the controller everytime. I cannot figure out why. I have verified the url of the action I am trying to post but I can't figure out why it is always posting to the index of the controller....Note: the view in which the form is found IS the index view. so Basically it is posting to it's own action rather than the one in the url i am telling it to. Any help would be great. thanks!

here is my form

 <form  action='' id="descriptionForm">
<%=Html.Hidden("claimNumber", ViewData["claimNumber"])%>
<%=Html.Hidden("partNumber", ViewData["partNumber"])%>
<%=Html.Hidden("qty", ViewData["qty"])%>
<table>
    <tr>
        <td style="text-align: right">
            Category:
        </td>
        <td>
            <%=Html.DropDownList("problemCategory", (IEnumerable<SelectListItem>)ViewData["problemSelect"], "-Select-")%>
        </td>
    </tr>
    <tr>
        <td style="text-align: right">
            Details:
        </td>
        <td>
            <select id="problemDetails">
            </select>
        </td>
    </tr>
    <tr>
        <td style="text-align: right">
            Dealer Notes:
        </td>
        <td>
            <%=Html.TextArea("dealerNotes", "", 3, 40, null)%>
        </td>
    </tr>
</table>
<div style="position: absolute; bottom: 8px; right: 8px">
    <input type="button" id="itemDetailsCancel" value="Cancel" />
    <input type="submit" id="itemDetailsSubmit" value="Save" />
</div>
</form>
 <a href='<%=ResolveUrl("~/Warranty/WarrantyClaims/CompleteAddLineItemToClaim/") %>'
id="CompleteLineItemUrl"></a>

Here is my Javascript

   $("#descriptionForm").submit(function () {
    var completeurl = $("#CompleteLineItemUrl").attr('href');
    var data = $(this).serialize();

    $.post({
        type:'POST',
        url: completeurl,
        data: data,
        success: function (result) {
            alert("done");
        }
    });
    return false
});

and just for good measure here is the controller action I am trying to post to(though it doesn't do much yet)

  [HttpPost]
    public ActionResult CompleteAddLineItemToClaim(string claimNumber, string partNumber, string qty, string problemCategory, string problemDetails, string dealerNotes)
    {
        var result = new { result = "done" };

        return Json(result, JsonRequestBehavior.AllowGet);
    }

Update: updated javascript

$(function(){

        $('#descriptionForm').submit(function () {
            var completeurl = $('#CompleteLineItemUrl').attr('href');
            var data = $(this).serialize();

            $.ajax({
                type: 'POST',
                url: completeurl,
                data: data,
                success: function (result) {
                    alert('done');
                }
            });
            return false;
        });

 });

Answer 1

Is the form itself loaded by an ajax call?

If so you need to use the live() function of jquery.

Answer 2

Make sure you have wrapped your javascript in a document.ready before subscribing for any events. Also you have a missing ; when returning false at the end of your method.

But your real problem is that you want to use $.ajax instead of $.post. So what actually happens is that you are getting a javascript error because of wrongly using the $.post function and the .submit handler never has time to return false and cancel the default submission of the form and the browser happily proceeds into POSTing to the action of the form (which is empty and default to the action that rendered this form).

So to sum up:

$(function() {
    $('#descriptionForm').submit(function () {
        var completeurl = $('#CompleteLineItemUrl').attr('href');
        var data = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: completeurl,
            data: data,
            success: function (result) {
                alert('done');
            }
        });
        return false;
    });
});

Or if you wanted to use $.post:

$(function() {
    $('#descriptionForm').submit(function () {
        var completeurl = $('#CompleteLineItemUrl').attr('href');
        var data = $(this).serialize();

        $.post(completeurl, data, function (result) {
            alert('done');
        });
        return false;
    });
});

Also instead of generating links à la classic WebForms way:

<a href='<%=ResolveUrl("~/Warranty/WarrantyClaims/CompleteAddLineItemToClaim/") %>' id="CompleteLineItemUrl"></a>

In ASP.NET MVC you use HTML helpers in order to ensure that link urls are conform to your routes:

<%= Html.ActionLink(
    "Link text", 
    "CompleteAddLineItemToClaim", 
    "WarrantyClaims", 
    new { area = "Warranty" },
    new { id = "CompleteLineItemUrl" }
) %>