您的位置:首页 > 其它

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

2012-03-29 14:18 471 查看
在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就不会提交了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: