JavaScript確認自動發佈表格

我有一個部分視圖，其中包含用於上傳文件的文件輸入。此視圖上的用戶將從他們的工作站中選擇一個文件並單擊上傳按鈕。上傳單擊將表單提交給一個操作方法，並對文件進行解析並返回相同的視圖以自動填充視圖上的幾個字段。JavaScript確認自動發佈表格

所有東西都是完美的。我加入到現有的視圖，其是如下新的要求：

要求

用戶選擇文件並點擊上傳按鈕。點擊上傳按鈕後，向用戶顯示一個JavaScript確認對話框，其中包含兩個按鈕選項，然後將表單提交給控制器操作方法。這些按鈕是「緩衝區運行解析」和「正常解析」。單擊這些按鈕中的任何一個將會發布到控制器操作方法。

在控制器動作方法後，我的目標是捕獲他們按下哪個按鈕，並基於按下按鈕我相應地選擇文件解析邏輯。

的問題

我創建一個JavaScript函數確實顯示兩個按鈕，但該對話框自動消失和形式職位到控制器。我希望它不會發布，直到我用確認單擊任一按鈕。

下面是我在做什麼：

主視圖：

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data"})) 
{ 
    <div id="main"> 
     @Html.Partial("_RunLogEntryPartialView", Model) 
    </div> 
}

管窺：

<button name="submit" class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" 
    style="width: 100px"> 
    Upload</button> 

<div id="uploadConfirmation" style="font-size: 10px; font-weight: normal; overflow: scroll; 
    width: 800px; height: 450px; display: none;"> 
</div>

JS功能：

function initUploadDailog(e) { 
     currentForm = $(this).closest('form'); 
     UploadDialog = $("#uploadConfirmation").dialog({ 
      modal: true, 
      width: 400, 
      autoOpen: true, 
      title: 'Please select parsing type for Test Completed Computation', 
      buttons: { 
       "Normal Parsing": function() { 
        $("#hiddenInput").val("Normal"); 
        alert(currentForm.innerHtml()); 
        currentForm.submit(); 
       }, 
       "Buffer Parsing": function() { 
        $("#hiddenInput").val("Buffer Run"); 
        currentForm.submit(); 
       } 
      } 
     }); 
    }

控制器：

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM, 
            string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates) 
     { 
}

來源

2013-03-28 tam tam

你可以試試更換$（「＃hiddenInput」）.val（「Normal」）;與$（「＃hiddenInput」）。attr（「value」，「Normal」）。我知道兩者都是一樣的，但最近我遇到了這種情況，我不得不做出這樣的改變。 – PRP

恭喜！你遇到了一個非常模糊的錯誤，很難排除故障！

問題在於您的標記;您的按鈕的屬性爲name="submit"。刪除它，如：

<button class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" style="width: 100px">Upload</button>

當你調用currentForm.submit()，它是不調用本地form.submit()功能;它是試圖使用按鈕元素作爲功能！

這是您的代碼的working jsFiddle。

歷史的一點點：因爲全能的Internet Explorer，與name屬性集元素被自動轉換成對象（或子對象）直接通過JavaScript訪問。這是IE團隊多年前最初想到的（雖然沒有遵循JavaScript/EMCA標準），並且由於大量的遺留網站，WebKit（Chrome，Safari）和Gecko（Firefox）已經實施了相同的破壞行爲。

來源

2013-04-05 03:01:27 Jesse

嗨，傑西，我以前無法上網，感謝您的解決方案。我已驗證你的，它的工作原理！我最終添加了另一個提交按鈕來上傳用戶可以使用的文件。至少我從你的解決方案學到了東西。 –

很高興幫助 - 現在你知道爲什麼你不能給元素與函數同名。 =） – Jesse

有你需要做的幾件事情。

首先，將Modal設置爲true。 False意味着它不會阻止用戶點擊除框外的頁面上的其他內容。

其次，您需要更改提交按鈕上的onclick以包含;return false;它應該爲onclick=initUploadDailog();return false;"這將阻止表單在單擊提交按鈕後立即提交。

第三，一旦選擇適當的按鈕，對話框本身需要提交表格。看到這裏：jquery dialog: confirm the click on a submit button

來源

2013-03-28 22:24:48 NotMe

謝謝，我確實將我的代碼更正爲您所建議的更改，並且也在上面的問題中。我確實得到了模式打開，但按鈕點擊，我相信沒有找到該表格，所以這就是爲什麼它不提交。點擊事件工作正常。 –

我看到2個解決方案。首先，如果您只是想以一切方式使用它，請嘗試將您的onclick="initUploadDailog();return false;"更改爲onclick="return initUploadDailog();"。然後我認爲在發佈表單之前，您的瀏覽器將等待返回true或false。但是，如果你想按照它的意圖使用jQuery，你將會想看看jQuery的event.preventDefault()。首先，給你的按鈕一個像id="art-button"的ID。接下來，將你的函數改爲綁定到按鈕點擊（我喜歡使用.bind和.click來實現瀏覽器兼容性）。

更改此：

function initUploadDailog(e) { 
    // Your code 
}

要這樣：

$("#art-button").bind('click', function(e) { 
    e.preventDefault(); 
    // Your code 
    $("#form-id").submit(); 
});

您還可以結合實際表單提交，防止默認，並使用AJAX來發表您的數據。

來源

2013-04-06 00:44:47

JavaScript確認自動發佈表格

回答

相關問題