JS 阻止 form 表单原生的提交行为

69 阅读 0 评论 46 点赞

我是靠谱客的博主柔弱红牛，最近开发中收集的这篇文章主要介绍JS 阻止 form 表单原生的提交行为，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Insert title here</title> 
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head> 
 <body> 
  <form action="/upload.action" enctype="multipart/form-data" method="post" id="form">
    请选择需要上传的文件： 
   <input type="file" id="file" name="file1" />
   <br /> 
   <input type="submit" value="Submit" onclick="return submit();" /> 
  </form> 

   <script>
      $(function () {
         function submit(){
            return false;
         }
      });
   </script>   
 </body>
</html>

据说她各种尝试，偏偏就是 <input type="submit" /> 不行<button /> 标签都可以。
但现实是，不要被表象迷惑。看代码，描述仅供参考。不然你会被她们拖进坑里爬都爬不出来。如果对方能准确描述问题，那她们应该早就自己解决了。

上面的坑有两个

submit() 定义在 jQuery 加载完成函数内部。外面根本访问不到。
form 标签本身有原生 submit 方法。会被直接调用。你定义的 submit 被直接无视。

所以换成下面这样就OK了

<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Insert title here</title> 
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 </head> 
 <body> 
  <form action="/upload.action" enctype="multipart/form-data" method="post" id="form">
    请选择需要上传的文件： 
   <input type="file" id="file" name="file1" />
   <br /> 
   <input type="submit" value="Submit" onclick="return submit1();" /> 
  </form> 

   <script>
	function submit1(){
		return false;
    }
   </script>   
 </body>
</html>