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

JS控制form表单提交

2016-05-04 00:00 429 查看

摘要: 原生javascript代码控制form表单提交，以及与type="submit"提交的区别

<!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按钮则能够弹出。

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

标签：

相关文章推荐

新的分享

章节导航