Форма запроса размещена дважды

Question

Я использую следующий код JavaScript в кнопке, чтобы опубликовать мою форму.

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

Я делаю это для формы, созданной с помощью помощника MVC3 Ajax.Form.

Почему-то моя форма публикуется дважды. какие-либо предложения?

Это сгенерированный 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>

Этот html помещается в диалог div с помощью jquery get. Как вы можете видеть, я удаляю исходную кнопку отправки из своей части и добавляю новую кнопку в свой диалог.

Функции javascript, ответственные за эту магию:

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();
};

Answer 1

Я нашел проблему. Каким-то образом я включил сценарии дважды на этой конкретной странице. Вот почему все выполняется дважды.

Следующие сценарии включены дважды:

<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>

Answer 2

Я подозреваю, что ваша оригинальная кнопка также отправляет форму. Чтобы предотвратить это, измените свой код на:

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

Вот ссылка для event.preventDefault () . Вы должны опубликовать больше кода, так как сейчас мы все в темноте.

Answer 3

Поскольку jquery.unobtrusive-ajax.js также прикрепил событие к кнопке отправки, происходит две отправки.

Вам не нужно прикреплять свой код к событию нажатия кнопки отправки, поскольку оно дублирует jquery.код unobtrusive-ajax.js, уже прикрепленный к этому событию.Удалите код, и он будет работать как положено.

Answer 4

Вы пропустили return? например onsubmit="return your_function();"