zoukankan      html  css  js  c++  java
  • Dom之表单提交与默认行为

    一、button提交表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="https://www.sogou.com/web" method="get">
            <input type="text" name="query">
    
            <input type="submit" value="提交">
        </form>
    </body>
    </html>
    

      效果图

    二、JS提交表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form id="form1" action="https://www.sogou.com/web" method="get">
            <input type="text" name="query">
            <div onclick="Submit();">提交</div>
        </form>
        <script type="text/javascript">
            function Submit(){
                document.getElementById('form1').submit();
                }
        </script>
    </body>
    </html>
    

      效果图

    三、问题:如果文本框中没有输入内容或内容全部为空格,我就不让它有提交的动作,怎么办呢?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form id="form1" action="https://www.sogou.com/web" method="get">
            <input type="text" name="query">
            <input type="submit" value="提交" onclick="return Submit();">
        </form>
        <script type="text/javascript">
            function Submit(){
                var obj = document.getElementsByName('query')[0];
                if(obj.value.trim()){
                    return true
                }else{
                    alert('请输入内容');
                    return false
                }
                }
        </script>
    </body>
    </html>
    

    解释:  

  • 相关阅读:
    至理明言100个经典句子
    ASP操作cookies的方法
    Recordset属性与方法
    VB.NET下用FSO(文件系统对象模型)实现获取硬盘信息
    诺基亚10个不为人知的秘密
    JavaScript的常用事件/方法/特效
    javascript常用方法
    C#操作xml
    URL重写
    数据库之间的区别
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6160976.html
Copyright © 2011-2022 走看看