предотвращение немедленного представления после модального popoup

Question

Проверка моей формы выполняется на стороне сервера, поэтому она запускается только тогда, когда пользователь отправляет форму. Я хочу показать модальное всплывающее окно с суммированием данных, которые только что ввели пользователь, и дать им возможность продолжить или отменить. На данный момент модальные дисплеи на секунду, а затем продолжают экономить, не дожидаясь подтверждения пользователя. Как я могу сохранить форму от отправки до тех пор, пока пользователь не решит это сделать?

форма:

<div id="Display" class="fieldset"> 
       @using (Html.BeginForm("AddAccount", "RxCard", FormMethod.Post, new { id = "Add", enctype = "multipart/form-data" })) 
       { 

        <fieldset> 
         <div class="form"> 
          <label id="lblAccountName">Account Name</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.AccountName, null, new { @class = "validationmessage" }) 
          @Html.TextBoxFor(model => model.Pharmacy.AccountName) 

          <label style="margin: 5px" id="lblAddress">Address</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.Address, null, new { @class = "validationmessage" }) 
          @Html.TextBoxFor(model => model.Pharmacy.Address) 

          <label style="margin: 5px" id="lblCity">City</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.City, null, new { @class = "validationmessage" }) 
          @Html.TextBoxFor(model => model.Pharmacy.City) 

          <label style="margin: 5px" id="lblState">State</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.State, null, new { @class = "validationmessage" }) 
          @Html.TextBoxFor(model => model.Pharmacy.State) 

          <label style="margin: 5px" id="lblZip">Zip</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.ZipCode, null, new { @class = "validationmessage" }) 
          @Html.TextBoxFor(model => model.Pharmacy.ZipCode) 

          <label style="margin: 5px" id="lblPhoneNumber">Phone Number (optional)</label> 
          @Html.ValidationMessageFor(model => model.Pharmacy.PhoneNumber) 
          @Html.TextBoxFor(model => model.Pharmacy.Area, new { @onkeyup = "tabout(this,'Pharmacy_Prefix');", @maxlength = "3", @style = "float:left; width:5em" }) 
          @Html.TextBoxFor(model => model.Pharmacy.Prefix, new { @onkeyup = "tabout(this,'Pharmacy_Suffix');", @maxlength = "3", @style = "float:left; width:5em" }) 
          @Html.TextBoxFor(model => model.Pharmacy.Suffix, new { @maxlength = "4", @style = "float:left; width:5em" }) 

          <input type="hidden" id="IgnoreDuplicate" name="IgnoreDuplicate" /> 
         </div> 
         <br/> 
        </fieldset> 
        <button type="submit" value="Save" name="AddNew" id="AddNew" data-toggle="modal">Save</button> 
        <button type="submit" value="Cancel">Cancel</button> 
       }    
      </div> 
     </section> 
     //modal 
     <div id="dialog-modal" class="dialog-modal-style"> 
      <div> 
       confirm details 
      </div> 
      <div> 
      Are you sure you want to submit the following account? 
      <table> 
       <tr> 
        <th>Account Name</th> 
        <td id="Name"></td> 
       </tr> 
       <tr> 
        <th>Address</th> 
        <td id="Address"></td> 
       </tr> 
       <tr> 
        <th>City</th> 
        <td id="City"></td> 
       </tr> 
       <tr> 
        <th>State</th> 
        <td id="State"></td> 
       </tr> 
       <tr> 
        <th>Zip Code</th> 
        <td id="Zip"></td> 
       </tr> 
      </table> 
      </div> 

JS:

document.getElementById("AddNew").onclick = function OpenDialog() { 

    var address = $("#Pharmacy_Address").val(); 
    var Name = $("#Pharmacy_AccountName").val(); 
    var City = $("#Pharmacy_City").val(); 
    var State = $("#Pharmacy_State").val(); 
    var Zip = $("#Pharmacy_ZipCode") 
    $("#City").text($('#Pharmacy_City').val()); 
    $("#State").text($('#Pharmacy_State').val()); 
    $("#Name").text($('#Pharmacy_AccountName').val()); 
    $("#Address").text($('#Pharmacy_Address').val()); 
    $("#Zip").text($('#Pharmacy_ZipCode').val()); 

    if (Zip && State && Name && address && City != "") { 
     $("#dialog-modal").dialog({   
      height: 300, 
      width: 300, 
      draggable: true, 
      modal: true, 
      dialogClass: 'dialog-modal-style', 
      buttons: { 
       "Add this account": function() { 
        $(this).dialog("close") 
       }, 
       "Cancel": function() { 
        $(this).dialog("close") 
       } 
      } 
     }); 
    } 
}; 

Answer 1

Изменить тип кнопки AddNew от представить на кнопку и добавьте следующую строку в Добавить эту учетную запись Функция обратного вызова кнопки в вашем модальном диалоговом окне для отправки формы вручную:

document.getElementById("Add").submit(); 

Answer 2

Вы можете использовать event.preventDefault(), которые ограничивают кнопку отправить вызов,

$('#AddNew').click(function(event){  

event.preventDefault(); 

var address = $("#Pharmacy_Address").val(); 
var Name = $("#Pharmacy_AccountName").val(); 
var City = $("#Pharmacy_City").val(); 
var State = $("#Pharmacy_State").val(); 
var Zip = $("#Pharmacy_ZipCode") 
$("#City").text($('#Pharmacy_City').val()); 
$("#State").text($('#Pharmacy_State').val()); 
$("#Name").text($('#Pharmacy_AccountName').val()); 
$("#Address").text($('#Pharmacy_Address').val()); 
$("#Zip").text($('#Pharmacy_ZipCode').val()); 

if (Zip && State && Name && address && City != "") { 
    $("#dialog-modal").dialog({   
     height: 300, 
     width: 300, 
     draggable: true, 
     modal: true, 
     dialogClass: 'dialog-modal-style', 
     buttons: { 
      "Add this account": function() { 
       $("#Add").submit();//Call form submit 
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
} 
});