1. 程式人生 > >可以用button代替input type=”submit”嗎? -- 關於button的一切

可以用button代替input type=”submit”嗎? -- 關於button的一切

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就不會提交了