阻止表单数据提交的几种方式

阻止表单提交的4种常用方式

方式1：给form标签的添加表单提交事件onsubmit="return false;"

<form onsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
function change() {
    
    //动作：阻止表单数据提交
    return false;
}
</script>

方式2：给form表单中的按钮添加单击事件onclick="return false;"

<form onsubmit="" id="myForm" method="POST" class="form-horizontal" role="form">
    <button class="btn btn-primary" type="submit" onclick="return change();">提交配置</button>
</form>
<script>
function change() {
    
    //动作：阻止表单数据提交
    return false;
}
</script>

方式3：也是给form标签添加表单提交事件，只是添加的方式不同而已

<form id="myForm" method="POST" class="form-horizontal" role="form">
</form>
<script>
$('#myForm').submit(function (event) {
        //动作：阻止表单的默认行为
        event.preventDefault();
        
        //这也是可以的，虽然也是绑定表单提交事件，
        // 但相比于onsubmit="return false;"，这个直接在事件处理程序（当前函数）中返回false就行了
        // return false;
    })
</script>

方式4：最后这个厉害了，也是最简单的，直接规定button的类型为button就行了

<form onsubmit="return change()" id="myForm" method="POST" class="form-horizontal" role="form">    
    <button class="btn btn-primary" type="button">提交配置</button>
</form>