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()"

你可能感兴趣的:(html+javascript如何在表单数据提交之前进行友好提示)