在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交。
button的type 属性,IE的默认是 “button”,非IE默认是 “submit”。如果想不提交需要指定type为”button”。
<form>
<button type="button">button</button><!--不提交form-->
<button type="submit">button</button><!--提交form-->
<button>button</button><!--非IE提交form,IE不提交form-->
</form>
1、input[type=submit]
<input type="submit" value="提交">
input[type]
默认值为text
设置type=submit
后,输入控件会变成一个按钮,显示的文字为其value
值。提交后会使用GET方式进行页面跳转
input
的type
属性还可以是button
,这时它只是一个按钮,不会引发表单提交。
2.button[type=submit]
button是一个按钮,type的默认属性是submit,所以点击会提交表单
建议用
button
作为交互用的按钮,来提交表单。同时请注意设置type=submit
来兼容IE。
3、表单验证
onSubmit是表单上(也只能是表单)用的,提交表单前会触发
onClick是按钮等控件上用的,用来触发点击事件。
在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。
但是onclick比onsubmit更早的被触发。
提交过程:
1、用户点击按钮 ---->
2、触发onclick事件 ---->
3、onclick返回true或未处理onclick ---->
4、触发onsubmit事件 ---->
5、onsubmit未处理或返回true ------>
6、提交表单.
onsubmit处理函数返回false,onclick函数返回false,都不会引起表单提交。
<form id="taskForm" name="taskForm" action="${ctx}/vbpm/task/modify" οnsubmit="return checkValidate(this.form);">
如果不加return,我们只执行了此函数,没有对其结果进行任何处理,会继续提交表单。校验通过,自动提交表单。
<input type="button" value="返回" onclick="taskForm.action='${ctx}/vbpm/task/list';clearLocalStorage();taskForm.submit();">
修改表单的action,也可以调用js方法进行表单验证,通过之后提交表单。
4、ajax提交form表单
采用ajax异步方式,通过js获取form中所有input、select等组件的值,将这些值组成Json格式,通过异步的方式与服务器端进行交互,
一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等
参考:http://www.cnblogs.com/klwyrn/p/5955152.html
$(function(){
$("#taskForm").click(
$.ajax({
type : 'post',
url : '/workflow/model/save',
dataType : 'json',
data : {
"modelId" : id,
},
success : function(data) {
},
error : function(){
}
})
);
})
5、<a href 超链接post提交form表单
超链接一般是get方式提交
<a href="${ctx}/modeler.html?modelId=${modelProcess.modelId}">设计流程</a>
用post方式提交form表单
<a href="javascript:document.searchForm.action='${ctx}/workflow/model/deploy/${modelProcess.modelId}';javascript:document.searchForm.submit();">部署</a>
根据action跳转到对应的请求,并将表单数据一并提交。spring mvc controller可以通过HttpServletRequest request.getParameter("")获取表单数据
http://www.anyrt.com/blog/list/submit.html 写的不错,可以参考