关于form表单用butten提交后无反应相关问题解决

记录一下自己在测试时遇见的问题：

1.自己用原生servlet随便写了一个web项目，相信都知道，input的type="submit"有提交表单的功能，当然，我们自己也可以给一个input的type="button"的按钮自定义点击事件以提交表单。

 在这里我不用submit而用自定义的button的原因是，submit是无条件提交表单，而登录框需要对用户输入进行判断，自定义的button能实现在满足判断条件后才提交表单。

一切如常，在from提交表单时发现后端取不到值，测试发现根本没有提交到后台，doget和dopost根本没执行。思考好久，也没找出问题（毕竟自己是小白，java虐我千百遍，我待java如初恋）.

a:上代码：

   <div>
      <form action="TestServlet?id=7" method="post">
        <div class="la">
          <input type="button"  class="one an" value="登录" />
          <input type="button"  class="one an" value="注册" />
        </div>
      </form>
    </div>

弄半天发现长时间没写忘的差不多了，直接上解决办法：

b:

<div>
      <form id = from1 action="TestServlet?id=7" method="post">
        <div class="la">
          <input type="button"  class="one an" value="登录" 
                 onclick="this.form.submit()"/>
          <input type="button"  class="one an" value="注册" 
                 onclick="document.getElementById('from1').submit();"/>
        </div>
      </form>
    </div>

在后面加上onclick点击事件，再提交后台就可以接受到了。

我这里用了两种提交方式，说到这里那就说一下form表单用button提交的三种方式：

方法1：
<form action = "提交的地址">
<input type="submit" value="提交">
</form>

方法2：
<form action = "提交的地址">
<input type="button" value="提交" οnclick="this.form.submit()">
</form>

方法3：
<form id="form1" action="提交的地址">
</form>
<input type="button" value="提交" οnclick="document.getElementById('form1').submit();">

其中最后一种比较灵活，比如说出发事件的可以不是一个按钮，而是一个超链接或者图片之类的元素。
<a οnclick="document.getElementById('form1').submit();">提交</a>

说了这么多，其实个人感觉用script更好，因为写其他的也方便，例如筛选之类：

我最后用的这种：

 

最后一种：

上代码：

 </head>
    <script type="text/javascript">
      window.onload=function(){
        var btn=document.getElementById('btn');
        var form=document.getElementsByTagName('form')[0];
        btn.onclick=function(){
          form.submit();
        }
      }
    </script>
  </head>

   <div>
      <form action="TestServlet?id=7" method="post">
        <div class="la">
          <input id="btn"  type="button"  class="one an" value="登录" />
          <input id="zc"   type="button"  class="one an" value="注册"  />
        </div>
      </form>
    </div>

最后还有一个问题，在使用最后一种方法时发现一个小问题：就是input框里的这个id=submit，会不能提交，同理name=submit也一样；

<input id="submit"  type="button"  class="one an" value="登录" />（不能提交）

<input name="submit"  type="button"  class="one an" value="登录" />（不能提交）

总结：最后一种方法不能提交的原因是：button的id是“submit”，导致了提交表单功能的失效。按F12，控制台报错了：Uncaught TypeError: form.submit is not a function 。问题的根源在于，对form中的button命名submit，这个名字和form的提交表单方法submit()名字重复了，这就导致了系统无法识别submit()这个方法，所以它不执行了。

  延伸：在编写代码时，我们应该注意命名的规范，应该与原生语言的保留字、关键字区分开。