提交表单
使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为“submit”即可,而图像按钮则是通过将 < input >的type属性值设为“image”。当单击按钮或图像按钮时,就会提交表单。
submit事件类型仅在表单内提交按钮,或者在文本框中输入文本时按回车键触发。
示例1:单击【提交】按钮后,触发submit事件,该函数禁止表单提交,而是弹出提示框
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form id="form1" name="form1" method="post" action="" onsubmit="return fun()"><input type="text" name="t" id="t" /><input type="submit"/></form><script>function fun(){var t = document.getElementById("t");alert(t.value);return false;}</script></body></html>
注意:当表单没有包含提交按钮时,在文本框中输入文本之后,只要按回车键一样能够触发submit事件。
**特殊情况:**在< textarea >文本区中回车只会换行,不会提交表单。
示例2:调用prevetnDefault()方法阻止事件的默认行为取消表单提交
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form id="form1" name="form1" method="post" action="" onsubmit="return fun()"><input type="text" name="t" id="t" /></form><script>var t = document.getElementById("t");var f = document.getElementById("form1");f.onsubmit = function(e){if(t.value.length < 1){var event = e || window.event;if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}}</script></body></html>
如果文本框为空,单击回车表单并不提交。
示例3:禁用回车提交表单
<script>var t = document.getElementById("form1");t.onkeypress = function(e){var e = e || window.event;return e.keyCode != 13;//按下回车时,返回false}</script>
示例4:调用submit()方法提交表单,不需要提交按钮
var t = document.getElementById("t");var f = doument.getElementById("form1");t.onchange = function(){f.submit();}
注意:在调用submit()方法时,不会触发submit事件,因此在调用此方法之前先要验证表单数据。
重置表单
为< input >或< button >标签设置type=“reset"属性可以定义重置按钮。
<inpu type="reset" value="重置"><button type="reset">重置</button>
当单击重置按钮时,表单将被重置,所有表单字段恢复为初始值。这是会触发reset事件。
示例1:单击【重置】按钮,弹出提示,恢复文本框默认值
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form id="form1" name="form1" method="post" action=""><input type="text" name="t" id="t" /><input type="reset" name="重置"/></form><script>var t = document.getElementsByTagName("input")[0];var f = document.getElementById("form1");f.onreset = function(e){alert(t.value);}</script></body></html>
示例2:当输入字符大于10个字符,取消重置操作
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><form id="form1" name="form1" method="post" action=""><input type="text" name="t" id="t" /><input type="reset" name="重置"/></form><script>var t = document.getElementsByTagName("input")[0];var f = document.getElementById("form1");f.onreset = function(e){if(t.value.length > 10){var event = e || window.event;if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}}</script></body></html>
提示:也可以使用form.reset()方法重置表单,这样就不需要包含重置按钮