html+javascript如何在表单数据提交之前进行友好提示

这种问题的应用场景是很多的，比如当用户购物需要删除某订单时，需要弹出对话框用户确认是否继续该操作。我把此种操作称作为用户危险操作。在用户进行危险操作时候务必要对弹窗给出友情提示，危险操作在用户确认之后才可继续进行。

现在这里有一个form表单，表单中有一个操作删除用户的所有历史信息。

<form action = "action" id = "formtest">
    //删除用户所有信息...
    <input type = "submit" value = "Submit" id = "btn">
</form>

此时为了保证此按钮不是用户无意中点到，确保用户信息安全。需要对这项提交进行验证。

如果按照常规思维：可以通过js判断，并在submit中onclick此函数于是有了一下代码：

<script>
    function confirmtest(){
        if(confirm("是否确认删除所有数据？此项操作不可逆！")){
            document.getElementById("btn").submit();
        }
    }
</script>

网上很多网友也都是给的这个答案或类似答案，但是这个答案是错误的。

没错，当使用如上代码时候，弹出了对话框，询问用户是否继续，但是不论用户点击确定或者取消，表单都会立即提交数据。--删除用户多有信息。

那么正确的代码是什么？

<form action = "action" id = "formtest" onsubmit = "return confirmsub()">
    //删除用户所有信息...
    <input type = "submit" value = "Submit" id = "btn">
</form>
<script>
function confirmsub(){
    if(confirm("确定要取消此订单吗？")){
        return true;
    }else{
        return false;
    }
}
 </script>

onsubmit = "return confirmsub()"

转载于:https://my.oschina.net/passer007/blog/626104