取消确认仍然提交表

我有一个表单提交和取消按钮，我想显示不同的confirm消息悬而未决，哪个按钮被点击，所以这就是我想出了。取消确认仍然提交表

function confirmDialog(buttonId) { 
    switch (buttonId) { 
     case "cancel": 
      var result = confirm("cancel message"); 
      submitForm(result); 
      break; 
     case "submit": 
      var result = confirm("Submit message"); 
      submitForm(result); 
      break; 
    } 
};

而且我submitForm函数看起来像

function submitForm(result) { 
    console.log(result); //this is false when I click cancel in the confirm box 
    if (result && $("#myform").valid()) { 
     $("#myform").submit(); 
    } 
    else { 
     return false; 
    } 
};

现在我的问题是，当我点击取消形式仍然得到submited。有人能告诉我我做错了吗？我有return false;在我的else条件，所以我真的不知道为什么它仍然提交表单。

我看着下面的问题，但我仍然面临的问题

jQuery Still Submits Ajax Post Even When “Cancel” is clicked on Confirm Dialog

javascript confirm (cancel) still submits form when returning false

编辑：取消按钮HTML的要求

<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

更多编辑

我所说的confirmDialog功能Click事件相应的按钮，如下所示：

$("#cancel").click(function() { 
    var buttonId = $(this).attr("id"); 
    confirmDialog(buttonId) 
});

来源

2017-03-09 Code

请发布您的HTML代码，并从您的位置调用confirmDialog功能？ – user7417866

看起来像是因为如果你点击取消，'confirmDialog（'cancel'）'运行，然后在确认对话框中单击“OK”，这会向'submitForm'函数发送一个bool'true'值？ – Stu

请张贴您的HTML代码。我想看看你是如何宣布你的'Cancel'按钮的 –

提交表单只是省略当“的onsubmit”变“假”，从JavaScript处理。

试试这个

“返回submitForm ......”（而不仅仅是 “submitForm ...”）

（2后函数的右括号删除分号）

更新

也许问题是input type=submit和的结合

如果<form onsubmit=...没有收到false（例如从函数返回），该形式将提交。

如果<input type=submit onclick=...收不到false（例如从函数返回），则执行按钮动作（表单提交）将。

原始（未选中）的解决方案，而无需使用input type=submit选项：

HTML

<form id="myform" onsubmit="formValidation()"> 
    <button value="Submit" onclick="buttonHandler(true)"> 
    <button value="Cancel" onclick="buttonHandler(false)"> 
</form>

function formValidation() 
{ 
    return $("#myform").valid(); 
} 

function buttonHandler(isSubmit) 
{ 
    if (isSubmit ==== true) 
    { 
     if (confirm(submitMessage) === true) 
     { 
      $("#myform").submit(); 
     } 
    } 
    else 
    { 
     if (confirm(cancelMessage) === true) 
     { 
      $("#myform").submit(); 
     } 
    } 
}

来源

2017-03-09 12:38:18 Gunnar

之后submitForm函数？ – Code

在每个函数之后，函数定义在分配为var x = function（）{}时只需要分号;否则，他们至少已经过时/不需要。（据我所知） – Gunnar

谢谢，但我仍然有相同的问题后尝试您的建议 – Code

你<button>标签的type属性似乎有submit作为它的价值，只是删除type="submit"属性在您的HTML代码中，并保持<button id="cancel".... />

<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

这将解决您的问题。希望这可以帮助！

来源

2017-03-09 12:38:27

我刚刚试过这个，我仍然得到同样的问题：/ – Code

你可以请尝试清除您的浏览器缓存并执行一次页面再次？ –

仍然是同样的问题 – Code

你的按钮有提交

默认行为与

<button id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

...编辑后您的更新试试这个代码....

更换更换

<button type="submit" id="cancel" class="btn btn-danger btn-block" value="Cancel">Cancel</button>

您的代码

function submitForm(result) { 
    console.log(result); //this is false when I click cancel in the confirm box 
    if (result && $("#myform").valid()) { 
     $("#myform").submit(); 
    } 
    else { 
     return false; 
    } 
};

与

function submitForm(result) { 
    console.log(result); //this is false when I click cancel in the confirm box 
    if (result && $("#myform").valid()) { 
     $("#myform").submit(); 
    } 
    else { 
     const element = document.querySelector('myform'); 
element.addEventListener('submit', event => { 
    event.preventDefault(); 

    console.log('Form submission cancelled.'); 
}); 
    } 
};

-----替代工作的代码，如果你考虑改变你的HTML结构---

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" 
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
      crossorigin="anonymous"></script> 
</head> 
<body> 
    <form id="MyForm"> 
     <button id="btnSubmit" class="btn btn-primary">Submit</button> 
     <button id="btnCancel" class="btn btn-danger">Cancel</button> 
    </form> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btnSubmit").click(function (e) { 
       e.preventDefault(); 
       $('#MyForm').submit(); 
      }); 
      $("#btnCancel").click(function (e) { 
       e.preventDefault(); 
       var result = confirm("Sure Cancel?"); 
       if (result) { 
        const element = document.querySelector('#MyForm'); 
        element.addEventListener('submit', function (e) { 
         e.preventDefault(); 
        }); 
        alert("Form Submission Canceled"); 
       } 
       else { 
        $("#MyForm").submit(); 
        alert("Form Submitted"); 
       } 
      }); 
     }) 
    </script> 
</body> 
</html>

来源

2017-03-09 12:39:58 user7417866

仍然是从你调用confirmDialog函数的地方 – Code

问题？ – user7417866

'confirmDialog'被称为int适当的按钮 – Code

你可以得到，如果你使用的输入标签这个工作而不是按钮标记，并保留你的类保持你的风格。例如

<input id="SomeId" 
class="btn btn-danger btn-block" 
onclick="return confirm('Are you sure you want to delete: X');" 
value="Delete" />

来源

2018-01-27 16:43:40 KVigor

取消确认仍然提交表

回答

相关问题