Js表单提交

JavaScript023

Js表单提交,第1张

表单提交是刚开始学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异步提交。但是了解一些还是好的。。。

1.jquery提交数据的方式：

（1）第一种jquery序列化提交数据方式：

通过id获取的form表单元素.serialize()

（2）第二种模拟form表单提交元素：

$('#form表单id').attr('method','post')

$('#form表单id'').find('input[name="type"]').val(test)

$('#form表单id').find('input[name="dfrom_to1"]').val(dfrom_to)

$('#form表单id').find('input[name="gt_road_new"]').val(gt_road)

$('#form表id').attr('action',AdminLTE.ctx+'/modules/ltegt/findAllCoverAndInterfere.do')

$('#analysisForm').submit()

2.js提交数据的方式：

(1).js提交表单( .submit()方法提交表单 )

function doSearch(){

var action ="<%=path%>/User_queryAllUser"

document.all.form.action = action

document.all.form.submit()}

(2).js替代超链接( window.location.href )

<input type="button" id="modify" value="修改工号" οnclick="modifyEmp(${ myList.employeeId })">

//js不能起名为modify，为敏感关键字

function modifyEmp( employeeId ){

//employeeId 作为js的参数传递进来

window.location.href = '<%=path%>/User_openUserUpdate?employeeId='+employeeId