Показать диалоговое окно 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 с возвращаемым значением boolean является удобным, особенно если вам нужно выполнить проверку ввода до публикации.

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" /> 
}