取消確認仍然提交表

我有一個表單提交和取消按鈕，我想顯示不同的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

取消確認仍然提交表

回答

相關問題