表单元素的提交

最新推荐文章于 2022-08-15 14:11:51 发布

一只极度渴望成长的Giser

最新推荐文章于 2022-08-15 14:11:51 发布

阅读量160

点赞数

分类专栏： Javascript、JQuery练习文章标签：表单元素的提交

本文链接：https://blog.csdn.net/qq_32077521/article/details/98457244

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #divSearch {
        width:100px;
        height:100px;
        background-color:aqua;
        }
    </style>
    <form id="form1" action="http://www.baidu.com/s" method="get">
        <input id="txt"/>
        <input type="submit" id="btnSubmit" value="百度一下，你就知道"/>
    </form>
    <div id="divSearch"></div>
    <script type="text/javascript">
        window.onload = function () {
            //当点击层中内容的时候自动提交搜索
            document.getElementById('divSearch').onclick = function () {
                //直接调用表单元素的submit()方法就可以提交进行搜索,或者是调用提交按钮的click()方法也可以实现提交
                //但是这两种提交方式有区别的，如果是调用提交按钮的click()方法进行提交，是会触发表单元素的onsubmit事件的
                //如果直接调用表单元素的submit()方法进行提交，则不会触发表单元素的onsubmit事件
                //这样设计的目的是，当我们通过按钮的ckick()方法进行提交的时候，可以在触发事件之前写一些控制代码
                document.getElementById('form1').submit();
                //document.getElementById('btnSubmit').click();
            };
            //当点击提交按钮进行提交的时候需要先进行对输入内容的一个判断，所以需要对表单的onsubmit事件进行注册
            document.getElementById('form1').onsubmit = function () {
                if (document.getElementById('txt').value == '') {
                    alert('请输入搜所内容！');
                    return false;
                }
            };
        };
    </script>
</body>
</html>