js表单提交和submit提交的区别

Posted 2023-05-08

假设：
A表单内有<input type="submit">，通过点击这个input来提交表单
B表单内没有<input type="submit">，而是写了一个<input type="button">，并且在这个input上绑定了click事件，在事件的监听器内用js的form.submit()提交。

1.在A表单内的某个input type=text，用户正与它交互（它是当前焦点），用户只需要按一下键盘的enter，就能提交表单；而B在某些情况下不行（部分情形参考回车提交表单），只能click下面的button；当然你可以给每个input绑定一个keypress事件，再检测按下的键是不是enter，如果是，就提交……只要不觉得蛋疼。
2.B表单提交不会触发form的 onsubmit事件；A会触发。

另外，还有html语义化的区别，A表单的处理更语义化，至于A能在js加载失败时提交表单（起码还能用），B不行之类的，就不说了。

总之，A，<input type="submit">更好，B在用户体验上差的有点多。 参考技术A js提交和submit按钮提交的区别:

1. js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器
2. input 回车提交 w3c浏览器会带上submit按钮的值，ie6则不会带
解决办法：
增加一个hidden域,用这个来判断，无论用哪种方式提交都会有值
submit按钮上绑定提交事件:
即:<input type="submit" name="btn" value="btn" onclick="test()" />
都会带上submit的值, 用js提交都检测不到onsubmit状态
w3c： 提交一次
ie6: 分两次提交，先js在form提交
解决办法：
如果按钮为submit则 检测时用onsubmit事件检测
如果按钮为button，则检测通过后在触发submit事件
一定不要用js提交表单，然后又用onsubmit去检测
单纯的用js提交表单, alert, ff下阻塞表单的提交，而其他浏览 参考技术B

主要区别有以下几点：

js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器

2. input 回车提交 w3c浏览器会带上submit按钮的值，ie6则不会带

解决办法：增加一个hidden域,用这个来判断，无论用哪种方式提交都会有值

submit按钮上绑定提交事件:

即:<input type="submit" name="btn" value="btn" onclick="test()" />都会带上submit的值, 用js提交都检测不到onsubmit状态   

w3c： 提交一次

ie6: 分两次提交，先js在form提交 

解决办法：如果按钮为submit则 检测时用onsubmit事件检测

如果按钮为button，则检测通过后在触发submit事件

一定不要用js提交表单，然后又用onsubmit去检测

单纯的用js提交表单, alert, ff下阻塞表单的提交

注意：get方式提交表单时 action里面不能用url传值, post则可以这样传

参考技术C 两个都是一样的，但可以直接从 Form 里面的输入框按下 enter 或是 submit 送出
主要差别是：Post, Get 这两种方式 参考技术D 1. js提交表单时不会带上 submit 按钮的值(因为没有被单击) 所有浏览器
2. input 回车提交 w3c浏览器会带上submit按钮的值，ie则不会带

input button 与 submit 的区别

在表单中，我们会经常提交数据，通常使用<input type="submit" value="提交"/>进行提交数据，

另一种方式是使用<button></button>按钮,在表单中它的默认类型是submit, 也可以提交数据

但是与<input type="button"/> 不同，这个就仅仅是一个按钮，无法自动地在提交表单，但也可以结合JS来实现提交。

 

-----------------------------------------------------------------------------------------------------------------------------------

注意事项

在使用<button>标签时很容易想当然的当成 <input type="button">使用，这很容易产生以下几点错误用法：

 1、通过$(‘#customBtn‘).val()获取<button id="customBtn" value="test">按钮</button> value的值

     在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。 参加上面标红的第一句话。

　　这一点要和<input type="button">区分开。                         

     通过这两种方式$(‘#customBtn‘).val()，$(‘#customBtn‘).attr(‘value‘)在不同浏览器的获得值

 

2、无意中把<button>标签放到了<form>标签中，你会发现点击这个button变成了提交，相当于<input type="submit"/>

--------------------------------------------------------------------------------------------------------------------------------------------------------------

 参考  https://blog.csdn.net/ldc5306590/article/details/54376417

 

1.input[type=submit]

我们直接来看例子：

 

 

代码如下：

<form>
    <input name="name">
    <input type="submit" value="提交">
</form>

其中点击按钮后的url变为?name=222222222。

其中有些值得注意的细节：

• 设置type=submit后，输入控件会变成一个按钮，显示的文字为其value值，默认值是Submit。
• form[method]默认值为GET，所以提交后会使用GET方式进行页面跳转。
• input[type]默认值为text，所以第一个input显示为文本框。

input其实是一个由输入控件改装过来的按钮，这源于Web早期的简陋设计。我们给它设置name便可以验证这一点：

<input name=‘btn‘ value=‘提交‘ type=‘submit‘>

提交后的结果为：

 

注意其中的URL为/?key=foo&btn=ok。作为按钮的input控件同时被当做一个表单输入提交给了服务器。 它到底是交互控件还是数据控件呢？定位是有些不清晰。再加上它的样式难以定制、不可作为其他标签的容器， 所以建议不要用input作为表单提交按钮。

注意：input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。

 

2.button[type=submit]

　　button的语义很明确，就是一个按钮不含数据，作用就是用户交互。但它也有type和value属性。 type的默认值是submit，所以点击一个button会引起表单提交：

<form>
  <input name=‘key‘>
  <button>确定</button>
</form>

　　注意:如果你在做IE浏览器的兼容，请记住button[type]在IE中的默认值是button，这意味着它只是一个按钮而不会引发表单提交。

　　另外，我们通过设置元素内容的方式来指定button的文字。这意味着button是一个容器控件， 其中可以包含任意的HTML标签，同时样式更容易定制。这也是为什么Bootstrap 文档中大量使用button作为示例的原因之一。

　　但是，button会很乱。button可以设置name和value。提交表单时，value会被作为表单数据提交给服务器。 在IE中，甚至会把button开始与结束标签之间的内容作为name对应的值提交给服务器。button和input的相似还不止于此，button也可以设置type=reset，此时点击按钮会导致表单被重置（这还挺有用的）。 w3school给出了如下的示例：

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

对于button就不多说了，建议用button作为交互用的按钮，来提交表单。同时请注意设置type=submit来兼容IE。

 

4.阻止表单提交

阻止表单提交也是一个常见的话题，通常用于客户端的表单验证。通用的办法是设置onsubmit：

<form onsubmit="return false;">
  <input name=‘key‘>
  <input value=‘ok‘ type=‘submit‘>
</form>

只需要在onsubmit的一系列语句最后返回false，便可以阻止它提交。 如果你希望调用一个方法来决定是否阻止提交，记得在此处返回方法的返回值：

<form onsubmit="return false;">
  <input name=‘key‘>
  <input value=‘ok‘ type=‘submit‘>
</form>