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

最新推荐文章于 2021-06-23 18:44:09 发布
最新推荐文章于 2021-06-23 18:44:09 发布
阅读量6.8k 收藏 4
点赞数 3
分类专栏： JavaScript 文章标签： javascript 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/racy696/article/details/77534850
版权 
<!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>
教官爱编程
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【项目实战】使用Maven打包时，跳过执行测试用例（运行mvn install时，跳过Test）
本本本添哥
05-14 1040
在Maven项目中，如果你希望在打包时跳过执行测试用例（运行mvn install时跳过Test），可以采用以下几种方法：（1） 使用命令行参数（2）修改POM.xml配置（3）IDE集成。
js获取form表单所有数据的简单方法
11-25
在HTML中用js获取通过GET、POST方法（就是在网址后加?a=b&c=d之类）传过来的表单值。 针对大家常用的获取表单方式，很多时候都... var form = document.getElementById(formId); var elements = new Array(); var tag
javascript当中document.forms的用法
qq_43650923的博客
11-13 728
2.document.forms 例 2.1（FormActionSubmitIEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/ht...
JS表单document.forms的用法(详解)
qq_44731369的博客
08-13 4455
代码 作用 document.forms 表示获取当前页面的所有表单 document.forms[0] 表示获取当前页面的第一个表单 document.forms[‘exportServlet’] 表示获取当前页面的name="exportServlet"的表单 document.forms[‘exportServlet’].username.value 获取表单为exportServlet，name为exportServlet的值 document.forms[0].su...
js获取form表单所有数据
03-01 1233
<script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); ...
JavaScript入门<3>JS外置对象：Window、Document对象与DOM实例详解
飞翔的心
10-16 1726
一）window对象 1、什么是DHTML？ 2、DHTML对象模型 3、什么是Window对象？它有哪些常用属性？常用子对象？ 4、Window对象有哪些常用方法？      1）对话框      2）窗口的打开与关闭      3）周期性定时器      4）一次性定时器      5）动态时钟 二）Document对象与DOM 1、什么是Document对象？什么是DO
document.form.xxxx方式获得表单元素
superlidengke的专栏
10-13 1285
这是老式的获取表单元素的方法，例如if(document.form.password.value=="")，它先找id为password的元素，找不到则找name属性为password的元素，再找不到就会报错。当然对于这句它是在name或id属性为form的标签中找的。
raccourcis-clavier:页面简单的JS语法和命令实用程序
03-27
总之，"raccourcis-clavier"项目涉及到的主要知识点包括：JavaScript基础语法、函数、DOM操作、事件监听（特别是键盘事件）、`Map`对象的使用以及表单处理。这些内容都是前端开发者在日常工作中经常遇到并需要掌握的...
如何在asp.net中用jQuery实现便捷的提示功能和表单验证功能
05-26
这篇博客“如何在asp.net中用jQuery实现便捷的提示功能和表单验证功能”将指导我们如何利用jQuery的强大力量来创建这些功能。 首先，我们需要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了...
常用的表单提交判断函数
12-29
在网页开发中，表单（Form）是用户与服务器交互的重要工具，用于收集用户输入的数据。为了确保数据的准确性和安全性，开发者通常需要对表单提交的数据进行一系列的判断和验证。JavaScript作为一种客户端脚本语言，是...
综合案例实战_biaomingb_
10-01
例如，我们可以通过JavaScript获取特定元素（`document.getElementById()`或`document.querySelector()`），然后改变其样式或内容。 综上所述，这个"综合案例实战_biaomingb_"可能是对HTML基础知识的实践应用，包括...
纯js上传文件
我本名叫一休的博客
03-21 1万+
纯js上传文件，文件上传，文件上传到后台，文件上传到服务器
document.forms的用法(详解)
热门推荐
念念不忘，必有回响
03-22 3万+
代码 作用 document.forms 表示获取当前页面的所有表单 document.forms[0] 表示获取当前页面的第一个表单 document.forms[‘exportServlet’] 表示获取当前页面的name="exportServlet"的表单 document.forms[‘exportServlet’].username.value 获取表单为e...
document.forms用法示例介绍
ssisse的博客
09-10 4720
document.forms用法示例介绍 forms 返回一个集合包含了了当前文档中的所有form元素，下面通过示例为大家介绍下document.forms用法, 概述 forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素. 语法 var collection = document.forms; 例子 获取表单信息
document.form.action,表单分向提交
coder
07-13 2469
document.form.action,表单分向提交,javascript提交表单 同一个表单可以根据用户的选择，提交给不同的后台处理程序。即，表单的分向提交。如，在编写论坛程序时，如果我们希望实现用户在发送贴子的时候，既发送提交功能又有预览功能时，就会遇到上述问题。即，当用户点击提交按钮时，我们希望表单提交给"提交"处理程序；而当用户点击预览按钮时，我们希望表单提交给"预览"处理程序。那么，如
html表单中search,HTML Input Search form用法及代码示例
weixin_35866747的博客
06-23 1257
HTML DOM中的DOM输入搜索表单属性用于返回包含输入搜索字段的表单的引用。它是只读属性，成功时将返回一个表单对象。用法:searchObject.form例：以下示例程序旨在说明输入搜索表单属性。Input Search form Propertyh1 {color:green;}h2 {font-family:Impact;}body {text-align:center;}Geeksfo...
document.form.submit()的使用
小王同学的博客
05-21 1万+
1、example： submit 参考：http://zhidao.baidu.com/question/96051969.html 2、。。 Html From 提交 关于Html form表单的提交，很容易。。。但如果不仔细还是能有很多错误 http://www.iteye.com/topic/311433
javascript入门·Document对象入门讲解(访问表单，创建新页，获取页标题)
08-30 1112
一 : Document访问页面多个表单二 : Document.Title 得到页标题：这有个前提，是页标题必须在 head的title字段三 : 演示三：Document.Write（） 创建新的页，一种是直接覆盖当前页 ，另种是打开新页Document对象包含页面的实际内容，其属性和方法一般会影响到页内文档的外观和内容！注意：浏览器允许在页面载入时动态创建内容，单是如果在页面载入完成以后
JS内置对象Request--获取表单数据
唐欢
01-19 2万+
JSP的内置对象在JSP页面中无须声明就可以直接使用,其内置对象常用的有Request,response,session,application,out,config,pageCOntext.今天我们要学习的主要是关于JSP内置对象Request. request
uniapp中用form表单上传文件
最新发布
03-25
A：在uniapp中，可以使用原生的表单控件来上传文件，即使用`<input type="file">`元素。具体操作如下： 1. 在vue文件中添加表单元素，如下所示： ``` <form> <label>选择文件:</label> <input type="file" accept="image/*" @change="handleUpload"> </form> ``` 2. 在method中，编写上传文件的方法，如下所示： ``` methods: { handleUpload(event) { let file = event.target.files[0]; //创建formData对象 let formData = new FormData(); //将选择的文件添加到formData中 formData.append('file', file); //发送ajax请求上传文件 uni.request({ url: 'http://localhost:8080/upload', method: 'POST', header: { 'content-type': 'multipart/form-data' }, data: formData, success: (res) => { console.log(res.data); } }) } } ``` 注意事项： 1. 必须将`content-type`设置为`multipart/form-data`。 2. `FormData`对象用于创建一组键值对，用于表示表单的某些键值对，可以通过`FormData.append()`方法添加一个新的键值对到`FormData`对象中。 3. 在`@change`事件中，通过`event.target.files[0]`获取选择的文件。 4. 发送ajax请求上传文件，注意要设置`method`为`POST`，并将`formData`作为`data`发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值