单击确认对话框的 "Cancel" 按钮时页面重定向

Question

请查看代码片段 -

<form action="post" onsubmit="return confirm('Are You Sure?')">
       <a id="saveBtn" class="btnClass">Save<a/>
</form>

当我点击 'Save' 然后点击确认弹出窗口的“确定”按钮时，表单被提交。如果我单击“取消”，则不会提交表单，我会留在当前页面上。是否可以单击“取消”按钮然后将页面重定向到其他页面？

Answer 1

是的，你可以，因为确认会 return true/false 你可以为错误的结果编写额外的行为，一个例子是：

<form action="post" onsubmit="return confirm('Are You Sure?')? true:window.location.assign('http://www.w3schools.com')">
   <a id="saveBtn" class="btnClass">Save<a/>

Answer 2

您可以通过将状态等同于 true 或 false 来处理确认对话框。

function myFunction() {
 var r = confirm('Are You Sure?');
 if(r==true) 
 return true;
 else {
    event.preventDefault();
    window.location="http://example.com";
 }
}

这是一个有效的 fiddle https://jsfiddle.net/BoyWithSilverWings/p7knLr3m/

Answer 3

您可能不应该使用 onsubmit 属性，使用不显眼的事件侦听器方法以获得更好的可读性和可维护性。

类似这样的内容应该显示总体思路，您可以使用自己的重定向更新它 link:

var submitLink = document.getElementById('saveBtn'),
    myForm = document.getElementById('myForm');

submitLink.addEventListener('click', function(e) {
    if (confirm('Are You Sure?')) {
        myForm.submit();
    } else {
        e.preventDefault();
        window.location = 'http://google.com'; // redirect to your own URL here
    }
});

这依赖于具有 id 属性的表单和锚点：

<form action="post" id="myForm">
   <a href="#" id="saveBtn" class="btnClass">Save<a/>
</form>