JS控制form表单提交

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_33805743

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量693

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/codercpf/blog/669804

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/codercpf/blog/669804