表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例
原始的表单提交有 button 按钮提交和 <input />类型的。它们又什么区别呢?
(1) 默认表单提交
(2)默认不会提交表单
(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面
(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转
(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面
(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面
(7) 下面的提交会发生什么?
分析 : 点击提交按钮:
(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form>的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'
(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效
现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。
js表单提交和submit提交的区别如下:
js提交表单时不会会带上按钮的参数传递到服务端。
而submit按钮提交的时候会把button上的name和value一起作为请求参数传递到服务端。
举例说明:
<form id="myfrom">
<input type="submit" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />
</form>
这里提交的时候会把参数名Mylist和参数值Send传到目标地址
<form id="myfrom">
<input type="button" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />
</form>
提交的脚本:
function doMySubmit() {
var myform = document.getElementById('searchFilterForm')
myform.myfield.value = "Hello World"
myform.submit()
}
这种情况下不会把button的参数带给服务端。