文档章节

JS控制form表单提交

m
 makingdifference
发布于 2016/05/04 18:11
字数 324
阅读 110
收藏 0
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Js控制表单提交</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post" id="myform">
    <div>
        <a href="javascript:void(0)" title="" onclick="javascript:test()">
            <img src="search.png" alt="" >
        </a>
     </div>
     </form>
     <script type="text/javascript">
         function test(){
             // alert(11);
             document.getElementById("myform").submit();
         }
     </script>
</body>
</html>

javascript:是伪协议,表示url的内容通过JavaScript执行;void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这样做一般是为了保留链接样式,具体操作交给onclick事件执行。

上面最好不用

<a href="javascript:test()"></a>

这种写法,因为有的手机不支持这种类型。

onclick事件中,可以直接写为submit事件:

<a href="javascript:void(0);" onclick="document.getElementById('myform').submit();"></a>

也可在void()方法中直接加载事件:

<a href="javascript:void(document.getElementById('myform').submit())"></a>


注意:

    如果使用以上JS控制表单提交,则不会执行form表单的onsubmit()事件。    

<form action="http://www.baidu.com" method="post" id="myform" onsubmit="alert(22)">
    <div>
        <a href="javascript:void(0)" onclick="javascript:test()">
            <img src="search.png" alt="" >
        </a>                
     </div>
     <div>
         <input type="submit" value="Submit" />
     </div>     
</form>
<script type="text/javascript">
    function test(){             
        document.getElementById("myform").submit();
    }
</script>

    以上示例中点击 <a>标签不会弹出对话框 22;点击submit按钮则能够弹出。

© 著作权归作者所有

m
粉丝 2
博文 54
码字总数 18586
作品 0
洛阳
技术主管
私信 提问
c#使用webBrowser,控制页面、提交表单的两种方法

一、第一种方法貌似网上很少有人提。。。。就是使用javascript去控制页面。 熟悉javascript的人知道,它主要是用来控制客户端浏览器上行为动作的语言。 用浏览器随便打开一个页面,在地址栏输...

晨曦之光
2012/05/16
487
0
10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍了10个不错的JavaS...

leon_rock
2012/04/20
42K
4
html中submit和button的区别(总结)

submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了。 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取...

临江仙卜算子
2018/06/22
26
0
回车自动提交 禁止回车自动提交 web开发 .

在开发过程中有时候需要回车自动提交,有时候有不不需要回车自动提交。很多人都喜欢用JS控制,但是用jS控制并不稳定 其实浏览器已经帮我们做好了这一补。。在网上找到了解答,如下。 今天遇到...

长平狐
2012/06/08
316
0
crmeb电商系统 PHP快速生成表单,支持表单验证

form-builder PHP表单生成器,快速生成现代化的form表单。包含复选框、单选框、输入框、下拉选择框等元素以及省市区三级联动、时间选择、日期选择、颜色选择、树型、文件/图片上传等功能。 ...

阿里源码
03/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

谁说多功能和低价格不能兼得?Aspose系列产品1024购买指南请查收!

你还在为了Word、Excel、PDF、CAD等文档格式转换而发愁吗? 你是否在寻找一款能够在应用程序中文档管理的工具呢? Aspose——支持100多种文件格式创建、编辑、转换和打印! 往下看,找一找哪...

mnrssj
22分钟前
3
0
hbase客户端API

本章介绍用于对HBase表上执行CRUD操作的HBase Java客户端API。 HBase是用Java编写的,并具有Java原生API。因此,它提供了编程访问数据操纵语言(DML)。 HBaseConfiguration类 添加 HBase 的配...

水木星辰
22分钟前
3
0
[插件化开发] 1. 初识OSGI

初识 OSGI 背景 当前product是以solution的方式进行售卖,但是随着公司业务规模的快速夸张,随之而来的是新客户的产品开发,老客户的产品维护,升级以及修改bug,团队的效能明显下降,为了解...

IsaacZhang
23分钟前
4
0
Webstorm 环境使用 nuxt.js 做开发,@ 和 ~ 别名配置

好的IDE + 好的代码提示 = 高效率的开发 webstorm 设置@和~别名,有助于代码查看和跳转. step 0 在项目下创建一个webpack.config.js,内容如下: const path = require('path')module.exp...

皇虫
27分钟前
3
0
Knative 实战:基于 Knative Serverless 技术实现天气服务-下篇

上一期我们介绍了如何基于 Knative Serverless 技术实现天气服务-上篇,首先我们先来回顾一下上篇介绍的内容: 通过高德天气 API 接口,每隔 3 个小时定时发送定时事件,将国内城市未来 3 天...

Mr_zebra
44分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部