可以用button代替input type=”submit”吗? -- 关于button的一切

转载 2012年03月29日 14:18:23

ie下,<button>标记恐怕还存在几个不大不小的问题。

在一个表单里,如果有一个以上"submit"类型的<button>标签存在,在表单被提交时,不管你点击哪个<button>,所有<button>的值都会被post/get。<button>的缺省type属性被设置为"button",但是在A级别浏览器下,应该设置为"submit"才对如果你用javascript去访问<button>的value属性,IE却返回了<button>的innerHTML属性,很让人恼火。 (可以使用"getAttributeNode"方法来避免.)

PLAIN TEXT

CODE:

<form>

<button type="submit"value="1" >text 1</button>

<button type="submit"value="2" >text 2</button>

</form>

在IE下,上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交你点击的那个button。

 

留言:

button的值是写在节点之间的,实事上是innerHtml的值~这点上讲比input更灵活一点:例如,你可以设置一个value为TEST
不过个人认为没有必要用button代替input吧

在只有一个button时,或者不放在form里的时候还是可以用的咯
button标签可以有更多的样式,比如可以加个图片什么的。

to vsky:
在firefox下,情况有所不同,表单提交的是button的value属性而不是innerHTML

加个onclick=”return false”就不会提交了…
要不你全用type=”button” ,提交的加一个onclick=”this.form.submit()”

这样的话,还是直接用input来得简单,不容易出现意料之外的行为

我认为 Button 并不是用来代替 input 的.
Button 是为了响应用户交互行为的.不是为了直接通过 Button 的 name 和值 来向 server 提交数据的.
虽然 button 可以提交 name:value. 但我认为提交数据应该用 input
也就是说应该这样用 Button
提示信息
提交
也就是说 button 里应该永远看不到 name 属性.



关键是合理使用button标签。html被屏蔽是wordpress的默认行为,不过有部分标签是被保留的,比如b,strong,ul,li之类的。

问题一:

一段表单代码:

<form action="msrCheckPlanAction" id="editFormId" method="post">

<td class="labelStyle">
<button onclick="doAction('save');" id="toPlanDetail">按钮提交</button>
</td>

</form>

js函数:

function doAction(act){
if(act=='return'){
location.href='msrCheckPlanAction.action';
}else if(act=='save'){
$("#editFormId").attr('action','msrCheckPlanAction!save.action');
$('#editFormId').submit();
}
}

问题来了,如果点击按钮提交的话,后台action中会有两次请求,也就是会执行两次表单的提交

弄了半天,感觉是button按钮提交的时候表单提交了一次,而它自己也执行了一次。

可以这样改:

<button onclick="doAction('save');return false;" id="toPlanDetail">按钮提交</button>

加个return false就不会提交了

button 和 submit 的区别

1.submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件...
  • x_Fledgling
  • x_Fledgling
  • 2016年12月23日 18:31
  • 3685

Form表单里的BUTTON的type='submit'和'button'的区别

1.submit 用于提交表单时 使用 onsubmit=”“ Email
  • u012493556
  • u012493556
  • 2016年08月14日 10:29
  • 788

尽量用button代替submit

尽量用button代替submit?
  • u011768325
  • u011768325
  • 2015年05月04日 16:16
  • 725

【Android进阶】Android里webview不支持input file的解决方法(上传按钮点击失效的原因)

三星、华为等android里webview不支持input file的解决方法 原文地址:http://camnpr.com/archives/1093.html 由于安全因素android web...
  • dodod2012
  • dodod2012
  • 2016年03月09日 14:10
  • 7250

支持FF和IE的回车提交(不使用Submit按钮)

转自:http://zhuhuide2004.iteye.com/blog/579430
  • wuha0
  • wuha0
  • 2014年11月11日 11:38
  • 523

表单提交:button input submit 的区别

最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践。先给结论: 建议使用button[type=submit]来提交表单,而不是input...
  • yangjvn
  • yangjvn
  • 2015年08月27日 00:52
  • 6627

button 默认类型是submit

“form表单里的按钮,明明是button而不是input type = submit,点击还是提交,如何让它不提交?” (这个问题被我遇到了,很坑爹的,知道了就不以为然了。) 因为 button...
  • u011944141
  • u011944141
  • 2016年07月27日 20:30
  • 2087

可以用button代替input type=”submit”吗? -- 关于button的一切

在ie下,标记恐怕还存在几个不大不小的问题。 在一个表单里,如果有一个以上"submit"类型的标签存在,在表单被提交时,不管你点击哪个,所有的值都会被post/get。的缺省type属性被设置为"...
  • wwbmyos
  • wwbmyos
  • 2012年03月29日 14:18
  • 6233

微信内置浏览器submit函数无效的问题

在表单提交按钮被点击时,触发提交函数,代码如下: .... 重选确定 上面这样写submit函数,在手机浏览器和Chrome移动模拟器中都可以正常工作,但是在微信内置浏览器下会直接提交表单,而不会执行...
  • iefreer
  • iefreer
  • 2015年08月13日 12:43
  • 6004

提交按钮(type="submit")中使用onclick事件

  提交按钮() ,对应事件为FORM的提交事件,有时FORM需要一些验证,比如验证时间(ONSUBMIT="RETURN CHECKTIME();") ,而且时间脚本为共有的,不能轻易修改,现在又想...
  • Opossum
  • Opossum
  • 2006年09月21日 14:39
  • 36219
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:可以用button代替input type=”submit”吗? -- 关于button的一切
举报原因:
原因补充:

(最多只允许输入30个字)