JS中type="button"和type="submit"的区别

　　Submit是专门用于提交表单的Button，与Button的区别主要有两点：

　　type=button 就单纯是按钮功能

　　type=submit 是发送表单

　　 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此

　　 (2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。

　　但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：　　

　　使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一. 　　

　　用button后往往页面不支持enter键了。所以需要支持enter键，必须要设置个submit，默认enter键对页面第一个submit进行操作。　　

　　执行完onClick，转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。 　　

　　执行完onClick，跳转文件在 js文件里控制。提交需要onClick。

　　比如：

　　1，onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。 　　

　讲白一些，就是submit会有一个跳转，页面会刷新；而button不会刷新，就是一个button；可以用<button type="submit/button/reset"></button>来生成按钮，更加灵活，样式更好控制。 　

以上所述是小编给大家介绍的JS中type="button"和type="submit"的区别，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • button没写type=button会导致点击时提交

    有个地方很奇怪:点击了一个弹窗中的按钮,没想到弹窗消失了,经公司的js高手调试,发现了其中的奥秘 复制代码 代码如下: <button class="btn btn_set_wj" onclick="add_q()">添加调查问卷</button> 加一个type ="button" 就好了: 复制代码 代码如下: <button class="btn btn_set_wj" type =&quo

  • 在javaScript中关于submit和button的区别介绍

    在javaScript中关于submit和button的区别介绍

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次.或者在使用submit时验证时加return true或false. submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交

  • input submit、button和回车键提交数据详解

    <form> <input name="name"> <input type="submit" value="提交"> </form> 以这种方式提交,input 值为22222222时,后面递交的url 就会变为localhost:3980/input.html?name=222222 其中有些值得注意的细节: 设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认

  • JS button按钮实现submit按钮提交效果

    今天在使用表单是同时使用POST更新.删除操作.然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,代码实现见如下: form设置: <form method="post" name="linkform"> 隐藏的act方法设置,代码如下: <input name="act" type="hidden" /> 最后关键的是 button的设置,更新按钮,

  • input、button的不同type值在ajax提交表单时导致的陷阱

    今天在做利用connection 作表单提交过程中发现,标签"input"跟"botton"中的type属性设置原来也是一门学问. 在开发过程中,为了使html代码更加整洁,我首先利用YAHOO.util.Event.addListener(obj, "click", callback)类加载"click"事件来提交表单,YAHOO.util.Connect.asyncRequest('POST')方式来上传表单数据,如果表单

  • 在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码

    复制代码 代码如下: <form onsubmit="aa(this);"> <input type="text" name="" value="test" /><input type="submit" value="提交" /> </form> <iframe src="" name="fA"

  • 在jQuery ajax中按钮button和submit的区别分析

    复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ $("#submit").click(function(){ $.post("sendPwd.php",{QQnum:$("#QQnum").val(),psw:$("#psw").val()},function(data){ $("#aaa

  • JavaScript在form表单中使用button按钮实现submit提交方法

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. 在javaScript中关于submit和button的区别介绍 在form表单提交中,使用button来间接完成submit的提交更为灵活.下面是实现方法: 使用button按钮实现submit提交,需要在button标签中的使用onclick方法,然后在JavaScript中实现具体,代码如下

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

  • JS中type="button"和type="submit"的区别

    Submit是专门用于提交表单的Button,与Button的区别主要有两点: type=button 就单纯是按钮功能 type=submit 是发送表单 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此 (2)表单提交时,所有具有name属性的html输入元素(包括input标签.button标签.select标签等)都将作为键值对提交,除了Submit对象.Submit对象只有在自己被单击后的提交中才会作为键值对被提交. 但是

  • JS中ESModule和commonjs介绍及使用区别

    目录 ES Module 导出 仅导出 重导出(re-exporting / aggregating) 嵌入式脚本 引入 语法 嵌入式脚本 特点 commonJS 导出 引入 特点 值拷贝 ES Module和 commonJS区别 ES Module 导出 仅导出 named exports: 命名导出,每次可以导出一个或者多个. default exports: 默认导出,每次只能存在一个. 以上两者可以混合导出: // 命名导出 export const b = 'b' // 默认导出 e

  • 详谈js中数组(array)和对象(object)的区别

    •object 类型: ◦ 创建方式: /*new 操作符后面Object构造函数*/ var person = new Object(); person.name = "lpove"; person.age = 21; /*或者用对象字面量的方法*/ var person = { name: "lpove"; age : 21; } •array类型 ◦ 创建方式: `var colors = new Array("red","blu

  • js中let和var定义变量的区别

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = 'hello world.'; console.log(hello); 错误信息如下: let hello = 'hello world.'; ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup

  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    目录 1.框架 2.简单介绍 3.代码演示 4.演示break 1.框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> </script> </body> </html> 2.简单介绍 1.在javascr

  • js中document.write和document.writeln的区别

    两者都是JavaScript向客户端输出的方法,对比可知写法上的差别是一个ln--line的简写,换言之,writeln 方法是以行输出的,相当于在?winte?输出后加上一个换行符 注意:document.write方法可以用在两方面:在网页载入过程中用实时脚本创建网页内容以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.该字符串参数可以是变量或值为字符串的表达式,写入内容常常包含HTML标记. 记住,载入网页后,浏览器输出流将自动关闭.在些

  • node.js中fs.stat与fs.fstat的区别详解

    前言 fs.stat和fs.fstat他们的方法功能是一样的,都是获取文件的状态信息,本文主要介绍的是关于node.js中fs.stat与fs.fstat区别的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: fs.stat用法: fs.stat('./aa.js', function(err, stats) { if (err) { throw err; } console.log(stats); }); fs.fstat用法: fs.open('./aa.js', 'a', func

  • JS中style.display和style.visibility的区别实例说明

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏.它们之间最大的区别是通过style.display=none隐藏的时候,元素不占据原来的位置,从文档流中脱离,后续的元素填补其位置.通过style.visibility=hidd

  • JS中的substring和substr函数的区别说明

    1. 在JS中函数声明: stringObject.substring(start,stop) start是在原字符串检索的开始位置,stop是检索的终止位置,返回结果中不包括stop所指字符. 如:"hamburger".substring(4,8) returns "urge" 2. substr(start,length) 如:当DETAIL_TYPE 的值为1111053 时, substr(DETAIL_TYPE,1,6) = 111105 从DETAIL

随机推荐