javascript实现自动填写表单实例简析

 更新时间:2015年12月02日 11:28:47   作者:Frank.Fan  
这篇文章主要介绍了javascript实现自动填写表单的方法,以一个简单实例形式分析了JavaScript结合浏览器设置实现自动保存表单的相关技巧,需要的朋友可以参考下

本文实例讲述了javascript实现自动填写表单的方法。分享给大家供大家参考,具体如下:

在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效。

步骤

1. 找到页面中对应的form,把form中所需的html控件列出来,如

<form name="customersForm" id="myform" method="POST" action="insert.php">
  <b> 姓 : </b> <input type="text" name="thisFnameField" size="20" value="">
  <b> 名 : </b> <input type="text" name="thisLnameField" size="20" value="">
  <b> 公司 : </b> <input type="text" name="thisCompanyField" size="20" value=""> 
  <b> 地址 : </b> <input type="text" name="thisAddressField" size="20" value="">
</form>

2.编写js代码

复制代码 代码如下:
javascript:customersForm.thisFnameField.value = "张";customersForm.thisLnameField.value = "三";customersForm.thisCompanyField.value = "公司";customersForm.thisAddressField.value = "中国";customersForm.submit.focus();

3.第三步最重要,因为前2步稍微有点js知识的人都会写这么简单的代码。接下来就是利用浏览器的收藏夹(书签)功能寄存js代码。

以chrome为例,在书签上点击右键————> 添加网页,名称填【自动填表】,网址填【上面那段js代码】,然后保存即可。

4.测试一下。

在浏览器中打开对应的页面,然后点击书签栏中的【自动填表】,你就会惊奇的发现表格已经填好了。

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    以目前的vscode版本来说,作者并没有开放访问本地媒体权限,所以插件市场里面的所有语音相关插件也并没有直接获取vscode的媒体权限,这篇文章主要介绍了vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件 踩坑日记!,需要的朋友可以参考下
    2023-05-05
  • Javascript日期格式化format函数的使用方法

    Javascript日期格式化format函数的使用方法

    这篇文章主要介绍的是javascript时间格式format函数,我们有时候调用的new Date()不是格式化的时间,可能显示不是很正常,那么这时候就需要格式化时间,今天这里分享一个javascript的foramt()函数,有需要的可以参考借鉴。
    2016-08-08
  • js如何准确获取当前页面url网址信息

    js如何准确获取当前页面url网址信息

    这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法,包括正则法、split拆分法等,需要的朋友可以参考下
    2016-04-04
  • 70+漂亮且极具亲和力的导航菜单设计国外网站推荐

    70+漂亮且极具亲和力的导航菜单设计国外网站推荐

    网站可用性是任何网站的基本要素,而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航,那么网站内容就会变得毫无用处。
    2011-09-09
  • javascript实现自由编辑图片代码详解

    javascript实现自由编辑图片代码详解

    这篇文章主要介绍了javascript实现自由编辑图片代码详解,在当下的的前端项目中,图片功能可以说是非常常见的,图片的展示、图片的裁剪编辑、图片的上传等,那么我们的项目便来了个需求。,需要的朋友可以参考下
    2019-06-06
  • 一问了解JavaScript中的元数据

    一问了解JavaScript中的元数据

    本文主要介绍了一问了解JavaScript中的元数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js中复选框的取值及赋值示例详解

    js中复选框的取值及赋值示例详解

    这篇文章主要给大家介绍了关于js中复选框的取值及赋值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • ES11新增的这9个新特性,你都掌握了吗

    ES11新增的这9个新特性,你都掌握了吗

    这篇文章主要介绍了ES11新增的这9个新特性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • JS使用正则实现去掉字符串左右空格的方法

    JS使用正则实现去掉字符串左右空格的方法

    这篇文章主要介绍了JS使用正则实现去掉字符串左右空格的方法,结合实例形式分析了JS针对首尾匹配及空格匹配的简单实现技巧,需要的朋友可以参考下
    2016-12-12
  • 用javascript操作xml

    用javascript操作xml

    用javascript操作xml...
    2006-11-11

最新评论