[ HTML ] <button> 在 <form> 中的注意事項

<button> 標籤在 Chrome、FireFox、 IE8、IE9 中預設有 Submit 的作用,在 IE6、IE7 中為 Button 作用,記得指定 type 屬性,防止各瀏覽器動作不一致。

/* 2012.10.12 Maple 記錄

2012.10.17 Maple 修改 */

我想大家應該都知道,套用 JQuery 的 button() 若想要有 icon 圖示,必須使用 <button> 標籤

使用 <input> 標籤是不行的 ( 我用的是 JQuery UI 1.8.23 版 )

但是需注意 <button> 標籤若沒有宣告 type 屬性,在 Chrome、FireFox、 IE8、IE9 中預設動作為 submit ,在 IE6、IE7 中為 button

經網友毛豆 提醒,記得加上 type 設定就能確保每個瀏覽器的動作一致

 

另外若是用到 javascript 的 var tempElement = document.createElement("button"); 時

不可使用 tempElement.type = 'button'; 的方式設定 ( IE7、IE8 不支援這樣的寫法 )

必須寫 tempElement.setAttribute("type","button");

 

至於以下的舊文就可以忽略了 ( 是我底子不好....不曉得 button 有 type 屬性 T_T )

在外層沒有 <form> 時不會有任何問題,

1.若外層有包 <form> 時,想讓 Button 無送出動作必須加上 onclick="return false;"  阻止在Chrome等瀏覽器的送出的動作

2.若外層有包 <form id='form1'> 時,為了讓 IE6、IE7 的 Button 有送出動作 只寫 onclick="$('#form1').submit();" 是‧不‧行‧的‧阿!!!!

必須寫  onclick="$('#form1').submit();return false;"  因為上面的寫法會造成 IE8 跟 IE9 連續送出兩次表單

我一直記得取消送出動作要加 return false;  卻忘記原本會 submit() 又多加 submit() 動作就造成連送兩次表單....

 

不知道有沒有人疑惑,

為什麼在沒有加 return false; 的情況下 chrome 跟 FireFox 卻不會有連送表單的問題

( 沒錯....只有 IE8 跟 IE9 會重送兩次表單 )

其實一開始 Chrome 跟 FireFox 並沒有這麼聰明!

因為我還在用 IE7 當開發環境的時後就為了 FireFox 重送兩次表單的問題研究好久

之後就很習慣會加上 return false; 防止送出表單

大概是之後的 FF 跟 chrome 版本有修正,讓瀏覽器不會快速送出兩次表單,所以現在沒加 return false; 也不會有問題。

而現在我改用 chrome 當做開發環境,上線前才開 IE 測試....

我以為 IE 永遠都這麼不合群不會把 Button 加上Submit 的動作 !

沒想到 IE8 就加了!  但還是不合群的送出兩次表單阿 !!!!! 又陰我   \ 皿 /