jquery表單發佈兩次

Question

我在buttonclick中使用以下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> 

這個網站是由一個jQuery get放入對話框的div。正如你所看到的，我從我的部分中刪除原始的提交按鈕，並添加一個新的按鈕到我的對話框中。

負責這個神奇的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

你已經錯過了return？例如onsubmit="return your_function();"

Answer 3

我懷疑你的原始按鈕也提交表單。爲防止出現這種情況，請將您的代碼更改爲：

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

這裏是event.preventDefault()的參考。你需要發佈更多的代碼，因爲我們現在都處於黑暗中。

Answer 4

因爲jquery.unobtrusive-ajax.js還附加了一個事件到提交​​按鈕，所以有兩個提交發生。

您不需要將代碼附加到提交按鈕單擊事件，因爲它複製了已附加到該事件的jquery.unobtrusive-ajax.js代碼。刪除你的代碼，它會按預期工作。