javascript 对表单form的一些说明和例子

最新推荐文章于 2021-06-03 05:25:09 发布

永远爱好写程序

最新推荐文章于 2021-06-03 05:25:09 发布

阅读量2.7k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/limlimlim/article/details/8454719

版权

Javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

form对象
form主要是把数据打包(例如input)提交给服务器

1.form对象是表单的Dom对象
2.方法:submit()提交表单，但是不会触发onsubmit事件
3.实现autopost,也就是焦点离开控件以后页面立即提交，而不是只有提交
   submit按钮以后才提交，当光标离开的时候触发onblur事件，在
   onblur中调用form的submit方法
4.在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行
   数据校验，数据有问题，返回false即可取消提交
5.<form name="form1" action="a.aspx" method="get"
    οnsubmit="if(document.getElementById('txtname').value.length<=0)
      {alert('姓名必填');return false;}">

1.举例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Form提交表单</title>
    <script type="text/javascript">
        function mySubmit() {
            var myForm = document.getElementById("myForm");
            myForm.submit();     //调用submit方法
        }
    </script>
</head>
<body>
    <form id="myForm" action="ok.aspx">
        <input type="text" />
        <input type="button" value="我不能提交" />
        <input type="button" value="我也能提交" οnclick="mySubmit()" />
        <input type="submit" />
        
        <br />
        <input type="button" id="btn1" value="单击我" οnclick="alert('你单击了我!')" />
        <input type="button" value="调用其他按钮的单击事件"
                    οnclick="document.getElementById('btn1').click();" />
    </form>
</body>
</html>

------------------------------------------------------------------------------------------------------------------
2.举例2 表单数据校验

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表单数据校验</title>
    <script type="text/javascript">
        function mySubmit() {
            var myForm = document.getElementById("myForm");
            myForm.submit();     //这里提交不会触发form的onsubmit事件，要注意
        }
        function SubmitCheck() {
            var myName = document.getElementById("myName");
            if (myName.value.length <= 0) {
                alert('姓名不能为空');
                window.event.returnValue = false; //取消表单的提交
            }
        }
    </script>
</head>
<body>
    <form id="myForm" action="ok.aspx" οnsubmit="SubmitCheck()">
        姓名:<input type="text" id="myName" />
        工作单位:<input type="text" id="myJob" οnblur="mySubmit()" />
        <input type="button" value="我也能提交" οnclick="mySubmit()" />
        <input type="submit" />
    </form>
</body>
</html>

------------------------------------------------------------------------------------------------------------------

3.举例3      下拉框列表选择后，自动提交表单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Select控件的Autopost</title>
    <script type="text/javascript">
        function selChange() {
            var myForm = document.getElementById("myForm");
            myForm.submit();
        }
    </script>
</head>
<body>
    
    <form id="myForm" action="ok.aspx">
        <select οnchange="selChange()">
            <option>香蕉</option>
            <option>苹果</option>
            <option>菠萝</option>
        </select>
    </form>
</body>
</html>