提交表单
3种实现方式:
<input type="button" value="submit" name="submit">
<button type="submit">submit form</button>
<input type="image" src="a.jpg">
- 只要表单存在以上任何一种按钮且获得焦点时都可以通过回车提交表单,(
textarea
会换行),即触发submit
事件,可在其中验证表单,或阻止提交,利用e.preventDefault();
- 也可以通过
form.submit()
方式提交表单,但这种方式不会触发submit
事件,因此要提前验证表单。
重置表单
input
和button
两种按钮实现,可用form.reset
重置表单,同时出发onreset
事件。
form.elements获取表单name
var form = document.forms[0];
form.elements[0];//获取第一个表单字段
form.elements['miao'];
//获取名为miao的字段,若是radio,会返回NodeList包含所有的同名name字段。
共有的表单属性
-
disable
是否禁用 -
form
指向当前字段所所属表单 -
name
表单字段名称 -
readOnly
字段是否只读 -
tabIndex
tab
切换序号 -
type
类型 -
value
提交给服务器的值
防止重复提交表单
第一次点击提交后就将其disable置为true
<input type="button" value="submit" name="submit">
var submit = document.forms[0]['submit'];
submit.onsubmit = function(){
submit.disabled = true;
//提交给
}
若上面用onclick
提交表单,有的浏览器会先触发click
事件,若在click
事件中禁用submit
按钮则导致表但不能正常提交。
var submit = document.getElementById('submit');
submit.onclick = function () {
alert('click');
submit.disabled = true;
};
document.forms[0].onsubmit = function () {
alert('submit');
};
以上代码在Chrome
和Opera
中测试时发现,在click
事件中禁用表单按钮后不能再触发onsubmit
事件,但是IE11、ff
下都能提交。
change
事件
对于input
和textarea
元素,仅当失去焦点且value
值改变时触发,select
元素在选项改变时触发。
change
事件和focus、blur
事件一起验证用户输入:
- focus
改变文本框的颜色
- blur
恢复文本框颜色
- change
验证用户输入是否合法,不合法的话重新focus
propertychange
事件和input
事件
-
input
事件:元素value
值发生改变时触发,IE11
或其他 -
propertychange
事件:元素属性改变时触发,IE10,9
专属。 -
IE11
已经不支持attachEvent
添加事件了
为表单元素添加的事件通过js改变value值后不能触发
为input添加change或者input事件后,只能通过页面手动改变value值后才能触发添加的回调函数,而通过js改变value值并不能触发。可将input的监听事件中要实现的功能封装成独立的方法,在js改变input元素值后继续调用此方法即可。