js操作表单

获取表单form

• document.表单名称
• document.getElementById(表单 id)
• document.forms[表单名称]
• document.forms[索引]; //从 0 开始

获取表单内input元素

• 通过id 获取:document.getElementById(元素 id)
• 通过form.名称形式获取: myform.元素名称
• 通过name 获取 :document.getElementsByName(元素名称)[索引] //从 0 开始
• 通过tagName 数组 :document.getElementsByTagName(‘input’)[索引] //从 0 开始
• 获取单选按钮
  
  • 前提:将一组单选按钮设置相同的 name 属性值
  • 获取单选按钮组:document.getElementsByName(“name 属性值”)
  • 遍历每个单选按钮,并查看单选按钮元素的 checked 属性若属性值为 true 表示被选中,否则未被选中
• 获取多选按钮
  
  • 操作方式与单选同理,不同之处在于可以多选
• 获取下拉选项
  
  • 获取 select 对象，var ufrom = document.getElementById(“ufrom”)
  • 获取选中项的索引，var idx=ufrom.selectedIndex
  • 获取选中项 options 的 value 属性值，var val = ufrom.options[idx].value
    
    • 当通过 options 获取选中项的 value 属性值时
    • 若没有 value 属性,则取 option 标签的内容
    • 若存在 value 属性,则取 value 属性的值
  • 获取选中项 options 的 text，var txt = ufrom.options[idx].text

提交表单

三种方式

• 使用普通 button 按钮+onclick 事件+事件中编写代码
  
  • 获取表单.submit()
• 使用 submit 按钮 + οnclick=”return 函数()” +函数编写代码
  
  • 最后必须返回:return true|false
• 使用 submit 按钮/图片提交按钮 + 表单 οnsubmit=”return 函数();” +函数编写代码
  
  • 最后必须返回:return true|false

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">

    <input name="test" id="uname"/><span id="msg"></span><br />
    <!--通过 js 事件:sub()提交表单-->
    <input type="button" onclick="sub();" value="提交表单 1" />
    <input type="submit" onclick="return sub2();" value="提交表单 2" />
    <input type="submit" value="提交" /><br />
    <input type="image" src="img.jpg" width="60px" height="40px" />

</form>

<script type="text/javascript">

    //input 的 type=button,调用 submit()方法提交
    function sub(){
        document.myform2.submit();
    }
    //进行校验,返回值为 true 才能提交
    function sub2(){
        var uname = document.getElementById("uname");
        var val = uname.value;
        if(val.length>0){
            return true;//提交
        }
        document.getElementById("msg").innerHTML = "不能空着啊!!!";
        document.getElementById("msg").style.color="red";
        return false; //不提交
    }
    //form表单的onsubmit 事件触发onsub函数
    function onsub () {
        var uname = document.getElementById("uname");
        var val = uname.value;
        if(val.length>0){
            return true;//提交
        }
        document.getElementById("msg").innerHTML = "填写点儿东西呗! (ˉ▽ ̄~) 切~~";
        document.getElementById("msg").style.color="red";
        return false; //不提交
    }
</script>