首页 > 其他 > 详细

DOM访问表单元素

时间:2017-02-17 18:56:43      阅读:124      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM访问表单元素</title>
    <script type="text/javascript">
        function one(){
            var form = document.getElementById("myform");
            //表单 .elements[下标]
            var name = form.elements[0];
           /* var name = form.elements["username"];
              var name = form.username;
           和上面等价*/
            alert(name.value);
        }
        function two(){
            var form = document.getElementById("myform");
            var password = form.elements[1];
            alert(password.value);
        }
        function three(){
            var form = document.getElementById("myform");
            var city = form.elements[2];
            alert(city.value);
        }
        function four(){
            //能够让点击普通按钮的时候完成提交动作
            var form = document.getElementById("myform");
            //提交
            form.submit();
        }

    </script>
</head>
<body>
<form id="myform" action="http://www.baidu.com" method="get"
      target="_self">
    <input name="username" type="text" value="xiaoming"/><br/>
    <input name="password" type="text" value="123456"/><br/>
    <select name="city">
        <option value="shanghai">上海</option>
        <option value="nanjing" selected="selected">南京</option>
    </select><br/>
    <input type="button" value="获取表单内第一个控件"
           onclick="one()"/>
    <input type="button" value="获取表单内第二个控件"
           onclick="two()"/>
    <input type="button" value="获取表单内第三个控件"
           onclick="three()"/>
    <input type="button" value="操作表单"
           onclick="four()"/>
</form>
</body>
</html>

  技术分享

 

DOM访问表单元素

原文:http://www.cnblogs.com/john568300/p/6411177.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!