前端页面元素,命名千万不要用submit或者reset!

背景

之前做前端页面时,对于一些页面请求,大多数是用ajax的方式来做交互的。也有一些做了提交之后,把post的信息进行处理,放到了session里,再跳转到新页面,从session里面获取信息进行查询、渲染。


最近有个小的页面需求,刚开始的时候我琢磨着是不是干脆就让提交的目标页面直接做渲染得了(虽然,后面因为其他原因,我方案又调整了)。


但是在做这个页面的时候,触发到了一个古老、奇葩的bug。隐隐约约记得很久以前(十几年前吧),也遇到过这个问题。当时估计没写下来,没什么印象了,所以这次,趁着问题还热乎,赶紧做下记录。

问题与结论

代码原先比较复杂,比如用到一些css、js的框架。为了方便说明,把问题做下简化,直接看这样一段html代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title> Test </title>
  <script type="text/javascript">
    window.onload = function() {
           var btn = document.getElementById('submit');
           var form = document.getElementById('form_test');
           btn.onclick=function() {
           form.submit();
           }
         }
  </script>
</head>
<body>
  <form id="form_test" action="https://www.baidu.com/s" method="get">
    <input type="text" name="wd" />
    <input id="submit" type="button" value="提交" />
  </form>
</body>
</html>


很简单的功能,一个输入框,写了内容之后,点提交,就是给baidu搜索带一个wd的参数过去。有问题没?


这么简单还能有问题??


好,点击提交试试吧!好嘛,现实给了我一个大大的耳光,提交失败,控制台出现了一个报错:

image.png


其实有报错信息,这个问题就很好解决了,稍微一搜,就会发现确实有很多文章都告诉了我们答案:页面中,不要出现id或者name是“submit”的元素!对的,不仅仅是这个button,其他元素你也别想用submit来命名。


十几年前的记忆开始涌现,当时似乎被这个问题还困扰了一阵子,可能当时网上对于这个问题的说明还比较少吧。


为什么后来我一直没有遇到过这个问题了呢?其实也很简单,我页面中虽然定义了submit为名字的元素,但是通常,我不会通过form的submit方法来进行操作,而是通过ajax的方式去直接与后端接口进行信息交互。只要不调用表单的submit方法,自然也就不会触发了。


除了submit,reset也是表单元素的对象方法。所以,这样一段代码,也会无情地给你报错,只不过,报错信息就变成了“Uncaught TypeError: form.reset is not a function”。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title> Test </title>
  <script type="text/javascript">
    window.onload = function() {
           var btn = document.getElementById('reset');
           var form = document.getElementById('form_test');
           btn.onclick=function() {
           form.reset();
           }
         }
  </script>
</head>
<body>
  <form id="form_test" action="https://www.baidu.com/s" method="get">
    <input type="text" name="wd" />
    <input id="reset" type="button" value="重置" />
  </form>
</body>
</html>


本文链接:https://www.poisonbian.com/post/5046.html 转载需授权!

分享到:
原文链接:,转发请注明来源!
「前端页面元素,命名千万不要用submit或者reset!」评论列表

发表评论