本節範例講解 JavaScript 的提交 form 表單和重置 form 表單。
提交表單
使用 <input> 和 <button> 標籤都可以定義提交按鈕，只要將 type 屬性值設定為“submit”即可，而影象按鈕則是通過將 <input> 的 type 屬性值設定為“image”。當單擊提交按鈕或影象按鈕時，就會提交表單。
範例1
在下面範例中，當在表單內的文字方塊中輸入文字之後，單擊“提交”按鈕會觸發 submit 事件，該函數將禁止表單提交資料，而是彈出提示對話方塊顯示輸入的文字資訊。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input name="" type="submit" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
// 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0];
// 獲取表單的參照指標
f.onsubmit = function(e){ // 在表單元素上註冊submit事件處理常式
alert(t.value);
return false; // 禁止提交資料到伺服器
}
</script>
範例2
在下面範例中，當表單內沒有包含“提交”按鈕時，在文字方塊中輸入文字之後按 Enter 鍵也一樣能夠觸發 submit 事件。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
// 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0];
// 獲取表單的參照指標
f.onsubmit = function(e){
alert(t.value);
}
</script>
在 <textarea> 文字區中按 Enter 鍵只會換行，不會提交表單。
以這種方式提交表單時瀏覽器會在將請求傳送給伺服器之前觸發 submit 事件，使用者有機會驗證表單資料，並決定是否允許表單提交。
範例3
阻止事件的預設行為可以取消表單提交。下面範例先驗證文字方塊中是否輸入字元，如果為空，則呼叫 preventDefault() 方法阻止表單提交。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
</form>
<script>
var t = document.getElementsByTagName("input")[0]; // 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0]; // 獲取表單的參照指標
f.onsubmit = function(e){
if(t.value.length < 1){
var event = e || window.event;
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
</script>
範例4
如果要禁止按 Enter 鍵提交響應，可以監測鍵盤響應，當按下 Enter 鍵時設定其返回值為 false，從而取消鍵盤的預設動作，禁止按 Enter 鍵提交響應行為。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
// 獲取文字方塊參照指標
t.onkeypress = function(e){ // 為文字方塊系結鍵盤keypress事件處理常式
var e = e || window.event; // 標準化事件物件
return e.keyCode != 13;
// 當按下確認鍵時，設定返回值為false，禁止預設鍵盤行為
}
</script>
範例5
呼叫 submit() 方法也可以提交表單，這樣就不需要表單包含“提交”按鈕，任何時候都可以正常提交表單。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
</form>
<script>
var t = document.getElementsByTagName("input")[0]; // 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0]; // 獲取表單的參照指標
t.onchange = function(){
f.submit();
}
</script>
呼叫 submit() 方法不會觸發 submit 事件，因此在呼叫此方法之前要先驗證表單資料。
在實際應用中，會出現使用者重複提交表單現象。例如，在第 1 次提交表單後，如果長時間沒有反應，使用者可能會反復單擊提交按鈕，這樣容易帶來嚴重後果，伺服器反復處理請求組，或者錯誤儲存使用者多次提交的訂單。解決方法：在第一次提交表單後禁用提交按鈕，或者在 onsubmit 事件處理常式中取消表單提交操作。
重置表單
為 <input> 或 <button> 標籤設定 type="reset" 屬性可以定義重置按鈕。
<input type="reset" value="重置按鈕">
<button type="reset">重置按鈕</button>
當單擊重置按鈕時，表單將被重置，所有表單欄位恢復為初始值。這時會觸發 reset 事件。
範例1
下面範例設計當單擊【重置】按鈕時，彈出提示框，顯示文字方塊中的輸入值，同時恢復文字方塊的預設值，如果沒有預設值，則顯示為空。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input name="" type="reset" />
</form>
<script>
var t = document.getElementsByTagName("input")[0];
// 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0];
// 獲取表單的參照指標
f.onreset = function(e){ // 在表單元素上註冊reset事件處理常式
alert(t.value);
}
</script>
範例2
也可以利用這個機會，在必要時取消重置操作。下面範例檢測文字方塊中的值，如果輸入 10 個字元以上，就不允許重置了，避免丟失輸入的文字。
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input type="reset" value="重置按鈕">
</form>
<script>
var t = document.getElementsByTagName("input")[0]; // 獲取文字方塊的參照指標
var f = document.getElementsByTagName("form")[0]; // 獲取表單的參照指標
f.onreset = function(e){
if(t.value.length > 10){
var event = e || window.event;
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
</script>
使用者也可以使用 form.reset() 方法重置表單，這樣就不需要包含重置按鈕。