表单提交的按钮总结

1.input标签提交

1.1>input[type=submit]

<form name=”form” method=”post” action=”#">
    <input type=”submit” name=”btn” value=”提交">
</form>

input的type属性是submit,会引发表单提交
作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>‘提交‘;

1.2>input[type=button]
input的type属性还可以是button,这时它只是一个按钮,不会引发表单提交

<form name=”form” method=”post” action=”#">
    <input type=”button” name=”btn” value=”提交">
</form>

2.button[type=submit]
type的默认值是submit,所以点击一个button,会引起表单提交
button[type]在IE中的默认值是button,这意味着它只是一个按钮而不会引发表单提交,请注意设置type=submit来兼容IE。
button可以设置name和value,提交表单时,value会被作为表单数据提交给服务器

<form>
     <input type="text" name=‘name‘>
     <button>提交</button>
</form>

用法举例

1.input[type=button]类型的js或者jquery提交

1.1>js方法提交

<form method="post"  name="form1" action="/Mz_report/excel_report">

<input  type=‘button‘ value=‘填报‘  onclick="show_confirm()">

</form>

function show_confirm(){

var result = confirm(‘请仔细确认填报数据是否正确,上报后不能修改‘);

if(result){

document.form1.submit();

}else{

return false;

}

}

1.2>jquery方法提交,同时补充url地址

以下可以通过jquery将form表单提交到不同的/控制器/方法

<form method="post"  name="form1" id="searchForm" >

<input  type=‘button‘ value=‘填报‘  id="report">

</form>

$(‘#report‘).click(function(){

$(‘#searchForm‘).attr(‘action‘,‘/Mz_report/excel_report‘);

})

2.button也可以设置type=reset,此时点击按钮会导致表单被重置(这还挺有用的)

<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>

时间: 2024-10-05 22:13:33

表单提交的按钮总结的相关文章

表单提交按钮input和button、a的差异

现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为他直接拥有type=submit,而button没有,它更适合于表达 button.然而... 首先我们说说:input标签:这个最常见了,不多说:当type="submit"时,提交表单数据! button标签:经过测试:在<IE8浏览器,button的默认type="b

表单提交时submit按钮的值没有被提交

FORM表单中,submit提交的时候,有时候有值,有时候无值 FORM表单中,submit的name是Submit.如下<input type="submit" name="Submit" value="提交表单" /> 1.出现的几种情况 1.当点击submit按钮时,FORM被提交,提交后获取的数组中有Submit下标的值 2.回到FORM表单,直接敲回车提交,这时候发现获取的数组中没有Submit下标. 3.在浏览器版本低的情

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

HTML表单提交总结

http://www.cnblogs.com/shizqiang/p/5984414.html 概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式. 1.最基本的表单提交. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单提交示例 - 基本表单提交</title> <

form表单提交转为ajax方式提交

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法. 原先的form表单长这样: <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <

Extjs 表单提交送给新手

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:[如果返回outputResult(“{success:true}”),则调用success的函数.如果返回:outputResult(“{success:false,reason:

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题. 一.无刷新实现form提交文件 将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了.实