Multiple posts on click to submit form using jquery dialog and asp mvc3

i am using the following form :

    @using (Ajax.BeginForm("SaveItem", "ItemsController", null, new AjaxOptions() { OnSuccess = "onFormSubmit" }, new { id = "itemSaveForm" }))
{ // form fields below

}

and the fallowing javascript code to manage this :

  function onFormSubmit(content) {
        $("#dialog-form").dial开发者_JAVA技巧og("close");
        $("#form-data").html(""); //empty form

        $.post('@Url.Action("GetItemRow", "ItemsController")', { id: id, adm:true }, function (data) {
           // update logic.. ignore
            }

        });
    }

and this is the jquery dialog script witch i use to submit :

 $(function () {
        $("#dialog:ui-dialog").dialog("destroy");

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 255,
            width: 420,
            modal: true,
            buttons: {
                "Add": function () {
                    var bValid = true;
                    $("#itemSaveForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {

            }
        });
    });

and every time i press the Add button from the dialog box... i get multiple submissions. Any ideeas why?

I suspect that the following line is the origin of your problems:

$("#itemSaveForm").submit();

How about using a normal HTML form:

@using (Html.BeginForm("SaveItem", "Items", FormMethod.Post, new { id = "itemSaveForm" }))   
{
    ...
}

and then configure the Add button on your dialog like this:

'Add': function () {
    var bValid = true;
    var form = $('#itemSaveForm');
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: onFormSubmit
    });
}

You need to either return false; or e.preventDefault(); or the JS code will handle the submit and after that the form is submitted.

return false;

does both .preventDefault(); and .stopPropgation().

http://api.jquery.com/event.stopPropagation/ http://api.jquery.com/event.preventDefault/