javascript - preventing immediate submission after modal popoup -

validation form done on server-side fires when user submits form. wish display modal popup summarizing data user entered , give them option continue or cancel. of right now, modal displays second , goes on save without waiting user confirmation. how can keep form submitting until user decides so?

form:

    <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>             sure want submit 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 account": function () {                     $(this).dialog("close")                 },                 "cancel": function () {                     $(this).dialog("close")                 }             }         });     } }; 

change type of addnew button submit button , add following line add account button's callback function in modal dialog submit form manually:

document.getelementbyid("add").submit();