• js表单操作


    name 很重要:

       在DOM中可以直接通过  表单.表单元素的name值来获取表单元素

        例:<form id ="form1">

            <input type="text" name="text1" value="文本"/>

                     </form>

        js:

          var oForm=document.getElementById('form1');

          alert(oForm.text1.value);//弹出“文本”

      onchange:当值发生改变的时候触发

        text:当光标离开的时候,如果内容有变化就触发

        radio/checkbox:标准下点击的时候只要值变了那么就会触发,非标准下焦点离开的时候如果值变了就会触发

        select:

        例:<form id ="form1">

          <input type="radio" name="sex" value="男"/>男

          <input type="radio" name="sex" value="女"/>女

          </form>

        js:  var oForm=document.getElementById('form1');

            oForm.sex[0].onchange=function(){

              alert("改变了")

            }

        当name值选中的是一组值,表单.表单元素的name值是一个集合,需要通过下标来选择元素

        <select name="city" value="">//value 的值为option中由selected属性的那个值

         <option value="">请选择城市</option>

         <option value="上海">上海</option>

         <option value="北京" selected>北京</option>

        </select>

        js: oForm.city.onchange=function(){

            alert(oForm.city.value);//弹出“北京”

          }

      onsubmit()方法 提交表单

        <form id ="form1">

          <input type="text" name="text1"/>

          <input type="submit" name="dosubmit" value="提交"/>

          <input type="reset" name="doreset" value="重置"/>

        </form>

       js:var oForm=document.getElementById("form1");

        oForm.onsubmit=function(){

          if(this.text1.value==''){

            alert("请输入内容");

            return false;//不会被提交

          }

        }

      onreset:事件 当提交表单重置的时候触发,注意重置不是清空,只是返回到上一次重置前的状态之前没有重置的话回到最初状态

        

        oForm.onreset=function(){

         var re=confirm('确定要重置吗?');//确认会返回true,取消返回false

          return re;

        }

  • 相关阅读:
    abstract关键字
    C#访问修饰符
    oracle客户端安装与配置
    Win10提示威胁服务已经停止,立即重启的解决方法
    什么是 Serverless 应用引擎?优势有哪些?
    Windows Server 2008 R2服务器系统安全设置参考指南
    Windows 2008 R2阿里云安全基线检查
    Windows Server 2008 R2 免费使用900天的方法
    Windows Server 2012 R2 英文版安装中文语言包教程
    七个穷人和富人不一样的地方
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/5702502.html
Copyright © 2020-2023  润新知