zoukankan      html  css  js  c++  java
  • onsubmit=return false阻止form表单提交

     return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方:

    1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方。如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数;只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处。

     function chkinput(form)
     {
       if(form.title.value=="")
        {
          alert("请输入文章标题!");
       form.title.select();
       return false;              //注意不能写成 return(false); 2009.12.15
        } 
     
       if(form.content.value=="")
        {
          alert("文章正文不能为空@!!");
       form.content.select();
       return false;
        }
     
        return true;
     }

    2.form的onsubmit属性的触发问题,onsubmit 事件什么时候触发?onsubmit 事件会在表单中的确认按钮被点击时发生。不触发的原因有一般如下:

    A. onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发,否则不会触发。如果是用一个普通input:button,则在onclick属性中指定一个javascript函数,在这个函数里面再执行form的submit()函数,而不是onsubmit属性。

    B. 先看一段代码:

     <form action="index.jsp" method="post" onsubmit="submitTest();">
    
    <INPUT value="www">
    <input type="submit" value="submit">
    </form>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    <!--
    function submitTest() {
    // 一些逻辑判断return false;
    }
    //--></SCRIPT>


    点击submit按钮该表单并未提交。因为有一处应该改为(红色字体)
    <form action="index.jsp" method="post" onsubmit="return submitTest();">

    原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;

    和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数。

    在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。

    onsubmit="return submitTest()利用到了它的返回值,达到了预期效果。

    3.事件处理函数返回false的问题,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.

    例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.   
    Return False 就相当于终止符,Return True 就相当于执行符。   
    在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的   
    onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果   
    你想取消对象的默认动作就可以return false。return false应用比较多的场合有:  

    <body>   
    1, <a href="/" mce_href="/" onclick=’test();’>超级链接 </a>   
    2, <input type="button" onclick=’test()’ value="提交">   
    3, <form name="form1" onsubmIT="return test();">   
    内容   
    <input type="submIT" value="提交">   
    </form>   
    </body>

    input type="submit" onclick="submitAction(); return false;" />   
    submitAction 方法里面有提交表单的动作。如果不加 return false,

    在执行完 submitAction 之后,submit 按钮还会继续执行它的默认事件,就会再次提交表单。这可能就是很多错误的根源。   
    的确,return false的含义不是阻止事件继续向顶层元素传播,而是阻止浏览器对事件的默认处理。你可以这样试验:
    首先将所有的js脚本注释掉,在IE浏览器中尝试拖动一下图片,你会发现鼠标会成为禁止操作的样式,图片是被禁止拖动的,它是浏览器针对mousemove事件所提供的默认行为。

    return false就是为了去掉这种行为,否则就会出现你描述的中断事件连续执行。   
    另外,和return false等效的语句为:

    window.event.returnValue = false,

    你可以把return false替换为此语句并进行验证。   
    最后说明一下,此种方式只适用于IE浏览器。

    在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 
    onclick时间(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果 
    你想取消对象的默认动作就可以return false。return false应用比较多的场合有:

    <form name="form1"  onsubmit="return youfunction();">...... </form> 
    <a href="www.***.com" onclick="...;return false;">dddd </a>
     ---------------
    
    

    一般的form提交操作写法为

    Html代码  收藏代码
    1. <form action="saveReport.htm" method="post">  
    2.     ……  
    3.     <input type="submit" value="保存报告"/>  
    4. </form>  

    点击submit按钮或直接回车可以将数据提交到saveReport页面,但是提交后也会跳转到saveReport页面

    如何做到

    将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢??

    这种需要在load一个页面的时候尤其迫切。

    利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下:

    Html代码  收藏代码
    1. <form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">  
    2.     <input type="submit" value="保存报告"/>  
    3. </form>  

    form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单

    saveReport对应函数为

    Java代码  收藏代码
    1. function saveReport() {  
    2.     // jquery 表单提交  
    3.     $("#showDataForm").ajaxSubmit(function(message) {  
    4.           // 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容  
    5.        });  
    6.       
    7.     return false// 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转  
    8. }  

     上述js已经进行注释

    ---------------\

    在对一个表单(form)进行客户端检验的时候,我们已经习惯了<form onsubmit="return check()">这样的形式,如果表单没有通过验证,在check函数中return false就会阻止表单的提交了。

    
    

    然而,如果要动态地为一个表单添加验证,即HTML代码中没有写onsubmit,而在页面加载后用javascript给这个form加一个handler,问题就 来了。

    
    

    假设我们已经得到了表单的DOM节点,保存在变量form中,一般这样来给它加上handler:

    
    

    if (form.addEventListener) {
    form.addEventListener("submit", check, false);
    } else if (form.attachEvent) {
    form.attachEvent("onsubmit", check);

    
    

    但是这个check函数现在应该怎么写呢?验证失败时,仅仅写一个"return false;"在Firefox中是不能阻止表单的提交的(在IE中可以),这就是为什么大家在onsubmit属性中要写"return check()",而不仅仅是"check()"。

    
    

    请看ECMAScript Language Binding,其中明确地写着,event listener没有返回值。其实一切的根本都因为IE不支持DOM Level 2,大家都习惯了IE的return false,到了Firefox中也只是一个ugly的变通,而很少去注意正确的做法。

    
    

    下面是一个可以被动态地attach(见上面的代码)的check函数:

    
    

    function check() {
    if (e && e.preventDefault) e.preventDefault();
    return false;
    }

    
    

    在IE和Firefox中,它都可以被动态挂载为onsubmit的handler而且正常工作。

    
    

    万恶的IE!

    
    

     另一篇:

    http://www.cnblogs.com/rainman/archive/2011/09/05/2168162.html

    http://www.okajax.com/a/200811/1124R012008.html

    http://www.blueidea.com/tech/web/2008/6231.asp

     

     

  • 相关阅读:
    使用 asp.net mvc和 jQuery UI 控件包
    ServiceStack.Redis 使用教程
    HTC T8878刷机手册
    Entity Framework CodeFirst 文章汇集
    2011年Mono发展历程
    日志管理实用程序LogExpert
    使用 NuGet 管理项目库
    WCF 4.0路由服务Routing Service
    精进不休 .NET 4.0 (1) asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进
    精进不休 .NET 4.0 (7) ADO.NET Entity Framework 4.0 新特性
  • 原文地址:https://www.cnblogs.com/youxin/p/2797405.html
Copyright © 2011-2022 走看看