jquery form posted twice

I use following javascript code in a buttonclick to post my form.

var formIsValid = $('#createFreezerForm').valid();
if (formIsValid) {
    $('#createFreezerForm').submit();
}
return false;

I am doing this for a form created with the MVC3 Ajax.Form helper.

Somehow my form is posted twice. any suggestions?

This is the generated html

<div id="freezerDialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 64px; height: auto; "><form action="/BiobankWebsite/Storage/Freezer/Create" data-ajax="true" data-ajax-failure="errorAjaxCall" data-ajax-method="post" data-ajax-mode="replace" data-ajax-success="freezerOverview.formPostComplete" data-ajax-update="#createFreezerForm" id="createFreezerForm" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="cu92co3Mwzt28mB3WCXGsmKYJ4RUQJxPcUUtQ4jyOcjrg82Y0QRJtGcmP818Isbd6bYqqMXj9xJOzt18TkSzFQerWNnu4F6b8pjSvvWjXNRSC3LYvisDR9+jjkG0ygtBWNSowIvdMva+Cq/9X9B9cQT2x6yOauFRen7vkmVDQMDJu9LWMZH4Z3Q6IEbonUMk"><input data-val="true" data-val-required="The FreezerId field is required." id="FreezerId" name="FreezerId" type="hidden" value="00000000-0000-0000-0000-000000000000">
<div class="validation-summary-valid" data-valmsg-summary="true">
    <span>Validation messages</span>
    <ul><li style="display:none"></li></ul>
</div>
<div class="left marginRight">
    <div class="editor-label">
        <label for="FreezerType">Freezer type</label>
    </div>
    <div class="editor-field">
        <select data-val="true" data-val-required="The Freezer type field is required." id="FreezerType" name="FreezerType">
            <option value="">Select one...</option>
            <option value="97cecf57-e596-4c6a-a43f-0eaed4e6a560">K10</option>
            <option value="e7a05273-1d4d-42ad-83a4-3e19f1b48e64">K38</option>
            <option value="304ed3e3-75c7-4437-a71b-5e26c718b684">U725</option>
            <option value="31bc9e43-c4da-4e84-a86e-62a25b122d56">U45</option>
            <option value="890256e8-036f-4a03-946a-fdc069b4b2e1">LBH</option>
        </select>
        <span class="field-validation-valid" data-valmsg-for="FreezerType" data-valmsg-replace="false">*</span>
    </div>
    <div class="editor-label">
        <label for="FreezerNameFormat">Freezer name format</label>
    </div>
    <div class="editor-field">
        <input class="medium" id="FreezerNameFormat" name="FreezerNameFormat" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="FreezerNameFormat" data-valmsg-replace="false">*</span>
        <span id="freezerName" class="bold"></span>
    </div>
</div>
<div class="left">
    <div class="editor-label">
        <label for="Temperature">Temperature</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Temperature must be a number." data-val-required="The Temperature field is required." id="Temperature" name="Temperature" type="text" value="0">
        <span class="field-validation-valid" data-valmsg-for="Temperature" data-valmsg-replace="false">*</span>
    </div>
    <div class="editor-label">
        <label for="FreezerNr">Freezer number</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Freezer number must be a number." data-val-required="The Freezer number field is required." id="FreezerNr" name="FreezerNr" type="text" value="0">
        <span class="field-validation-valid" data-valmsg-for="FreezerNr" data-valmsg-replace="false">*</span>
    </div>
</div>
<div class="clear">
    <div class="editor-label">
        <label for="Location">Location</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" id="Location" name="Location" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="Location" data-valmsg-replace="false">*</span>
    </div>
</div>
<div class="clear marginTop">
    <button type="submit" style="display: none; ">
        Create</button>
</div>
</form></div>

This html is put into the dialog div by a jquery get. As you can see I remove the original submit button from my partial and add a new button to my dialog.

The javascript functions responsible for this magic:

var showCreateDialog = function () {
    getForm(urls.freezer.create, '#createFreezerForm');
    dialog.dialog({
        title: 'Create freezer',
        width: 400,
        resizable: false,
        buttons: {
            Create: function (event) {
                event.preventDefault();
                var formIsValid = $('#createFreezerForm').valid();
                if (formIsValid) {
                    $('#createFreezerForm').submit();
                }
                return false;
            },
            Cancel: function () {
              开发者_开发问答  $(this).dialog("close");
            }
        }
    });
    dialog.dialog('open');
};

var getForm = function (url, formId) {
    $.get(url, null, function (html) {
        dialog.html(html);
        hideAndDisableOriginalButton(formId);
        $.validator.unobtrusive.parse("#createFreezerForm");
    }, 'html');
};

var formPostComplete = function (response) {
    dialog.dialog('close');
    grid.trigger('reloadGrid');
};

var hideAndDisableOriginalButton = function (formId) {
    var freezerFormCreateButton = $(formId + ' button:submit');
    freezerFormCreateButton.attr("disabled", "true");
    freezerFormCreateButton.hide();
};

I found the issue. Somehow I included the scripts twice at that specific page. That's why everything is executed twice.

The following scripts where included twice:

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Have you missed the return ? for example onsubmit="return your_function();"

I suspect your original button is also submitting the form. To prevent this, change your code to:

function somethingClicked(event) {
    event.preventDefault();
    var formIsValid = $('#createFreezerForm').valid();
    if (formIsValid) {
       $('#createFreezerForm').submit();
    }
    return false;
}

Here is a reference for event.preventDefault(). You need to post more code though as we're all in the dark right now.

Because jquery.unobtrusive-ajax.js has also attached an event to the submit button, there are two submits occurring.

You do not need to attach your code to the submit button click event, because it duplicates the jquery.unobtrusive-ajax.js code already attached to that event. Remove your code, and it will work as expected.