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

JavaScript012

js表单提交和submit提交的区别,第1张

假设:

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在用户体验上差的有点多。

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下阻塞表单的提交,而其他浏览

submit只是表单提交时的验证事件,无法获取提交是否成功

return false阻止表单提交,自己写ajax提交表单内容

$("#xxx").submit(function () {

$.ajax({ type: 'POST', data: $(this).val(), url: 'xxxx',

success: function () { //...

},

error: function (xhr) {

//...

}

})

return false

})