在發佈表單到行動方法之前顯示jQuery對話框

Question

我有一個基本的表單。當用戶提交表單時，我想要顯示一個jQuery對話框，詢問用戶是否確定要繼續。

這是我有：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dialog-confirm").dialog({ 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Continue": function() { 
        // continue and post data to action method 
       }, 
       "Cancel": function() { 
        // close dialog and do nothing 
       } 
      } 
     }); 
    }); 
</script> 

@using (Html.BeginForm("Index", "Members", FormMethod.Get)) 
{ 
    Name: @Html.TextBox("searchName") 
    <input value="Submit" type="submit" /> 
} 

但我不知道如何連接的對話框到表單提交。有誰知道這是怎麼做到的嗎？

Answer 1

你可以做這樣的：

$('form#yourFormId').submit(function(e){ 
    e.preventDefault(); 
    $('#dialog-confirm').dialog('open'); 
}); 
$("#dialog-confirm").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
      "Continue": function() { 
       $(this).dialog('close'); 
       $("form#yourFormId").submit(); 
      }, 
      "Cancel": function() { 
      // close dialog and do nothing 
      } 
    } 
}); 

Answer 2

可以通過添加一個單擊處理程序的提交按鈕，防止表單提交，但打開的對話框中做到這一點。然後Continue按鈕回調中提交表單

<-- adding ID to button--> 
<input id="mySubmitButton" value="Submit" type="submit" /> 

JS

$("#dialog-confirm").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
      "Continue": function() { 
       // am not familiar with parsing dotNet form helper, assume "Members" is form ID 
       $('form#Members').submit()/* or use AJAX*/ 

      }, 
      "Cancel": function() { 
       $(this).dialog('close') 
      } 
     } 
    }); 

$('#mySubmitButton').click(function(e){ 
    e.preventDefault() 
    $("#dialog-confirm").dialog('open') 
}) 

Answer 3

如果我有一個提交按鈕，但我希​​望做一些客戶端腳本的形式發佈之前，我在做這個HTML：

<input id="mySubmitButton" value="Submit" type="submit" onclick="return MyFunction();"/> 

在JS

我這樣做：

function MyFunction() 
{//any code you wanted to run here 
    return true; 
} 

您需要更改MyFunction以提示用戶並在他們取消操作時返回false。

這種使用布爾返回值調用javascript函數的方法非常方便，特別是當您需要在發佈之前執行輸入驗證時。

Answer 4

如果您想要關閉對話框，並避免頁面提交數據，你需要把：

return false; 

使用在對話框中您繼續功能重定向。你不需要有一個功能，它會一直工作。我在你的對話框中使用了這個方法，用於我的asp.net網站。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#dialog-confirm").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
      "Continue": function() { 
       // continue and post data to action method 
       // Redirect to a page 
      }, 
      "Cancel": function() { 
       // close dialog and do nothing 
       return false; 
      } 
     } 
    }); 
}); 
</script> 

@using (Html.BeginForm("Index", "Members", FormMethod.Get)) 
{ 
    Name: @Html.TextBox("searchName") 
    <input value="Submit" type="submit" /> 
}