阻止模式popoup後立即提交

驗證我的表單是在服務器端完成的，因此只有當用戶提交表單時纔會觸發。我希望顯示一個模式彈出窗口，彙總用戶剛剛輸入的數據，並讓他們選擇繼續或取消。截至目前，該模式顯示一秒鐘，然後繼續保存而無需等待用戶確認。我如何保持表單不被提交直到用戶決定這麼做？阻止模式popoup後立即提交

形式：

<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") 
       } 
      } 
     }); 
    } 
};

來源

2016-09-12 thatdude

這種事情通常是通過使用'='button''，而不是'型類型進行= 'submit'並手動調用'form.submit（）'在按鈕點擊處理程序 – Tibrogargan

@Tibrogargan問題是模式只顯示域通過驗證後。在KhalidT的答案中更改類型並添加行將處理所有內容，但不會觸發驗證。或者我只是不明白你想說什麼？ – thatdude

請看[this]（/ questions/7548612/triggering-html5-form-validation） – Tibrogargan

變化從的的AddNew按鈕的類型提交到按鈕，並添加以下行添加此帳戶手動提交表單的模式對話框中的按鈕回調函數：

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

來源

2016-09-12 22:55:01

-1

您可以使用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"); 
      } 
     } 
    }); 
} 
});

來源

2016-09-13 04:20:56

阻止模式popoup後立即提交

回答

相關問題