如何使用确认对话框阻止表单提交？

Question

我有一个有两个提交按钮的表单 - 保存并提交。下面是这些按钮的HTML标记：

<form id="formBooking"> 
<input type="submit" name="FormAction" id="Save" value="Save"> 
<input type="submit" name="FormAction" id="Submit" value="Submit"> 
</form> 

我创建了两个函数表示对应一个确认对话框，在这FormAction选择：

function confirmSave() 
{ 
    return confirm('This operation will save your booking.'); 
    } 

function confirmSubmit() 
{ 
    return confirm('This operation will submit your booking.'); 

} 

，这里是我的jQuery来处理提交点击：

$("#formBooking").on('click', 'input[type="submit"]', function (e) { 
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok 
     e.preventDefault(); 
     return; 
    } else { 
     // HERE I NEED TO FIRE THE CONFIRM DIALOG DEPENDING ON IF ITS A SAVE OR SUBMIT 
     var options = { 
      data: { 
       FormAction: $(this).attr("value") // is it a save or submit? 
      }, 
      forceSync: true, 
      uploadProgress: function (percentComplete) {}, 
      beforeSend: function() { 

      }, 
      success: function() { 

      }, 
      complete: function() { 

      } 
     } 
     $("#formBooking").ajaxSubmit(options); 
     // return false to prevent normal browser submit and page navigation 
     return false; 
    } 
}); 

因此，当用户点击或者提交按钮，JQuery的应该火confirmSave()或confirmSubmit()功能。如果用户在确认对话框中点击“取消”，我不希望表单提交。

我尝试将"onClick: confirmSave()"添加到按钮本身的工作，但当用户点击取消它仍然提交了表格！

有什么建议吗？

Answer 1

您可以添加确认到您的验证if语句，像这样：

$("#formBooking").on('click', 'input[type="submit"]', function (e) { 
    if (!$("#formBooking").valid() 
      || !($(this).is('#Save') ? confirmSave() : confirmSubmit())) { 
     e.preventDefault(); 
     return; 
    } else { 

     var options = { 
      data: { 
       FormAction: $(this).attr("value") // is it a save or submit? 
      }, 
      forceSync: true, 
      uploadProgress: function (percentComplete) {}, 
      beforeSend: function() { 

      }, 
      success: function() { 

      }, 
      complete: function() { 

      } 
     } 
     $("#formBooking").ajaxSubmit(options); 
     // return false to prevent normal browser submit and page navigation 
     return false; 
    } 
}); 

Answer 2

更新：

更改两个提交按钮来type="button"和：

HTML：

<form id="formBooking"> 
    <input type="button" name="FormAction" id="Save" value="Save"> 
    <input type="button" name="FormAction" id="Submit" value="Submit"> 
</form> 

的jQuery/JavaScript的：

$(document).on('click', '#Save', function() { 
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok 
     e.preventDefault(); 
     return; 
    } else { 
     confirmSave(); 
     submitForm(); 
    } 
}); 

$(document).on('click', '#Submit', function() { 
    if (!$("#formBooking").valid()) { //uses Jquery validator plug-in to ensure form is ok 
     e.preventDefault(); 
     return; 
    } else { 
     confirmSubmit(); 
     submitForm(); 
    } 
}); 

function submitForm(){ 
     // HERE I NEED TO FIRE THE CONFIRM DIALOG DEPENDING ON IF ITS A SAVE OR SUBMIT 
     var options = { 
      data: { 
       FormAction: $(this).attr("value") // is it a save or submit? 
      }, 
      forceSync: true, 
      uploadProgress: function (percentComplete) {}, 
      beforeSend: function() { 

      }, 
      success: function() { 

      }, 
      complete: function() { 

      } 
     } 
     $("#formBooking").ajaxSubmit(options); 
     // return false to prevent normal browser submit and page navigation 
     return false; 
    } 
} //END fn formSubmit() 
function confirmSave() { 
    return confirm('This operation will save your booking.'); 
} 
function confirmSubmit() { 
    return confirm('This operation will submit your booking.'); 
}