JavaScript和jquery取消表单提交

JavaScript取消表单提交：

1、表单提交事件onsubmit，事件函数返回false时，可以取消表单的提交。

用法示例：οnsubmit="return func();"或者form.οnsubmit=function(){return false;}

 

<form id="login" class="form-horizontal" action="login_login.action" onsubmit="return validate();" method="post">

</form>

function validate(){
        alert("请输入验证码！"); //则弹出请输入验证码  
        return false;
    }
    else if(inputCode != code ) { 
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("verificatCode").value = "";//清空文本框  
        return false;
    }
    else {//输入正确时 
        return true;
    }
}

在form表单中onsubmit的书写一定是要"return 方法()",只写"方法()"则不行。并且要有返回值，返回false，就会阻止提交，返回true，则不会。错误的写法是:

<form id="login" class="form-horizontal" action="login_login.action" onsubmit=" return validate();" method="post">

</form>

在form表单中onsubmit的书写一定是要"return 方法()",只写"方法()"则不行。并且要有返回值，返回false，就会阻止提交，返回true，则不会。错误的写法是:

<form id="login" class="form-horizontal" action="login_login.action" οnsubmit="validate();" method="post">

</form>

2、通过提交按钮的点击事件onclick属性，事件函数返回false。

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>
  
<script>
 var submitBtn = document.getElementById("submit");
  
 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;//此处return false;即不会提交表单，一般验证表单数据不符合要求使用
 };
</script>

或者：

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>
  
<script>
 var submitBtn = document.getElementById("submit");
  
 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容标准浏览器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>

或者jquery里面的提交按钮的click()点击事件返回false：

下拉列表<select>和<option>,选定的option的value值，即为select的值。select标签没有value属性，所以option的值就是select的值。

    <select name="type" id="type" class="form-control" >
        <option value="0">--请选择--</option>
        <option value="1">计算机</option>
        <option value="2">小说</option>
        <option value="3">杂项</option>
     </select>
        <input id="sub01" type="submit" value="增加图书" class="btn btn-success"/>
    $("#sub01").click(function(){
        if($("#name").val() == null || $("#name").val() == ""){
            alert("图书名不能为空");
            //window.history.back();
            return false;
        }
        if($("#author").val() == null || $("#author").val() == ""){
            alert("作者名不能为空");
            //window.history.back();
            return false;
        }
        if($("#time").val() == null || $("#time").val() == ""){
            alert("日期格式不正确");
            //window.history.back();
            return false;
        }
        if($("#type").val() == "0"){
            alert("请选择书籍类型")
            //window.history.back();
            return false;
        }


    });     

 

jQuery取消表单提交：

 

 

1、通过表单提交的submit()函数。

$("form").submit( function () {
        return false;
    } );

 

 

 

综上，就是通过表单提交事件和提交按钮的点击事件，返回false来取消表单提交。