您的位置：首页 > Web前端 > JavaScript

JS中用document对象操作form表单案例

2017-08-24 18:06 585 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度360一起搜</title>
<!--
作者：李瑞琦
时间：2017-08-24
描述：用document对象操作form表单
-->
<!--css代码域-->
<style type="text/css">
#div01{
margin: 0px auto;
margin-top: 100px;
width: 380px;
text-align: center;
}
#div02{
margin: 0px auto;
margin-top: 100px;
width: 380px;
text-align: center;
}
#search{
width: 280px;
height: 30px;
font-size: 16px;
}
#div03{
margin-top: 30px;
}
</style>
<!--javascript代码域-->
<script type="text/javascript">
function test(){
//获取用户数据标签对象
var search = document.getElementById("search");
//校验用户数据
if (search.value!=null&&search.value!="") {
//获取百度数据框对象跟360数据框对象
var bd = document.getElementById("bd");
var so = document.getElementById("so");
//把获取到的用户数据给百度跟360数据框对象
bd.value = search.value;
//获取form表单对象
var fmb = document.getElementById("fmb");
var fmp = document.getElementById("fmp")
//开始提交表单数据
fmb.submit();
fmp.submit();
//将隐藏的div显示
document.getElementById("div03").style.display="";
} else{
alert("关键字不能为空");
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com/s" id="fmb" method="get" >
<input type="hidden" name="bd" id="bd" value="" />
</form>
<form action="http://www.so.com/s" id="fmp" method="get">
<input type="hidden" name="so" id="so" value="" />
</form>
<div id="div01">
<img src="img/logo.gif" />
</div>
<div id="div02">
<input type="text" id="search" name="search" value="" />
<input type="button" value="点击一下" onclick="test()" />
</div>
<div id="div03" style="display: none;">
<iframe src="" name="bif" width="49%" height="100px"></iframe>
<iframe src="" name="pif" width="49%" height="100px"></iframe>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 表单

相关文章推荐

新的分享

章节导航

JS中用document对象操作form表单 案例

JS中用document对象操作form表单案例