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;

    }

posted @ 2016-07-25 10:10  Heroine.z  阅读(161)  评论(0编辑  收藏  举报