zoukankan      html  css  js  c++  java
  • 表单处理

    1.获取表单方法

    document.getElementById('myform')

    document.getElementsByTagName('form')[0]

    document.forms[0]

    document.forms['yourform']   // 使用form的名称下标获取元素

    document.yourForm  // 使用name名称直接获取元素

    PS: submit事件,用传统的方式: object.onsubmit = function(){}

    问题: submit事件,为什么要用form对象来触发呢?为什么不能是input中的sub按钮来触发呢?

      答: 把submit事件注册到input中的submit按钮,是无法出发到submit事件的,必须把submit事件绑定到form对象上,才可以触发submit事件,只不过是触发submit事件的流畅是点击input中的submit按钮而已

    submit()方法可以让非submit按钮进行提交,但是对象一定是form

    <form id="myForm" name="yourFrom">
            <input type="text" name="user" value="123">
            <input type="button"  value="提交" id="btn">
        </form>
        <script type="text/javascript">
            var btn = document.getElementById('btn');
            var fm = document.getElementById('myForm');
            btn.onclick = function(){
                fm.submit();
            }
        </script>

    2.表单控件获取

        <form id="myForm" name="yourFrom">
            <input type="text" name="user" value="123">
            <input type="button"  value="提交" id="btn" >
        </form>
        <script type="text/javascript">
            var fm = document.getElementById('myForm');
            console.log(fm[0])   // 向下兼容,不推荐
            console.log(fm.length)   // 向下兼容,不推荐
            console.log(fm.elements)   // 表单空间集合 HtmlCollection
            console.log(fm.elements.length)  // 推荐
            console.log(fm.elements[0])   // HTMLInputElement
            console.log(fm.elements['user'])
        </script>

     3.选择框脚本

    添加选项

    <form id="myForm" name="yourFrom">
            <select name="city" multiple = 'multiple'>
                <option value="上海">上海</option>
                <option>无</option>
    
            </select>
        </form>
        <script type="text/javascript">
        var city = document.getElementsByName('city')[0];
        // DOM添加
            // var option = document.createElement('option');
            // option.appendChild(document.createTextNode('北京 t'));
            // option.setAttribute('value','北京 t');
            // city.appendChild(option);
        // 使用option构造函数添加
            var option = new Option('北京t','北京v');
            // city.appendChild(option);  // IE不支持
            city.add(option, undefined)  // 最佳兼容方案,如果把undefined换成数字或者null都会产生浏览器不兼容
         // city.remove(0) // 删除第0个元素

    单选框和复选框:

    判断checked = true 就行

  • 相关阅读:
    聊聊面试-NoClassDefFoundError 和 ClassNotFoundException 区别
    聊聊面试-int和Integer的区别
    数据库char varchar nchar nvarchar,编码Unicode,UTF8,GBK等,Sql语句中文前为什么加N(一次线上数据存储乱码排查)
    SQL Server数据库阻塞,死锁查询
    数据误操作,教你使用ApexSQLLog工具从 SQLServer日志恢复数据!
    IDEA将Maven项目中指定文件夹下的xml等文件编译进classes
    Tomcat 中文乱码,设置UTF-8
    C#实现前向最大匹、字典树(分词、检索)
    23种设计模式汇总
    Head First设计模式——原型模式和访问者模式
  • 原文地址:https://www.cnblogs.com/redpen/p/8835292.html
Copyright © 2011-2022 走看看