在按钮上单击确认警报框，查询提交也取消

Question

我创建了一个按钮来从数据库中删除数据。按钮代码如下所示：<form method="post">  <button name="remove" onclick="myFunction()" style="margin-left: -15%; border-radius: 15px;" class="button button2">Remove</button></form>我已经给出了一个警报确认框以继续或取消按钮单击。function myFunction() {  confirm("Do you want to remove?!");}现在单击按钮后，如果我取消或确定，两者都在执行查询。取消按钮不会取消点击。谁能告诉这里有什么问题。

Answer 1

方式1：你可以使用这个：

  <button name="remove" onclick="return confirm('Are you sure?')" style="margin-left: -15%; border-radius: 15px;" class="button button2">Remove</button>

这return是非常重要的

方式2：

function myFunction() {

     if (confirm('Are you sure?')) {

           //Do SomeThing...!

     }

}

Answer 2

您需要验证确认响应

function myFunction() {

  if (confirm("Do you want to remove?!")) {

    //do stufff here...

    console.log('success')

  } else {

    console.log('cancel')

  }

}

<button name="remove" onclick="myFunction()"class="button button2">Remove</button>

Answer 3

确保你做 preventDefault 因为你的删除按钮在表单内

document.getElementById("uniqueId").addEventListener("click", function(event){

  event.preventDefault();

  if(confirm("Msg")){

    //do something

  }

});

<form method="post">

  <button name="remove" id="uniqueId"  style=" border-radius: 15px;" class="button button2">Remove</button>

</form>

确保每个按钮都有唯一的 id