JavaScript 控制表单提交（js提交表单触发事件）

表单中元素的共同属性和方法:

disabled 用于获取或设置表单控件是否被禁用

注意:true为禁止 false为可用 在HTML代码中disabled="disabled"来禁用表单元素

checked 对于单选按钮和复选框而言,选中则为true

defaultChecked 对于单选按钮和复选框而言,如果初始时是选中的则为true

value 除了下拉菜单以外,所有元素的value属性值(字符串形式,如果输入表单的值为整数,所获取的值仍然为字符串)

defaultValue 对于文本框和多行文本框而言,初始设定的value值

form 指向元素所在的<form>

name 元素的name属性

type 元素的类型

blur() 使焦点离开某个元素

focus() 聚焦到某个元素上

click() 模拟用户单击该元素

select() 对于文本框、多行文本框而言，选中并高亮显示其中的文本

onsubmit：当表单提交时才触发

onsubmit这个事件一定是给form标签来使用

表单都会有一个默认提交行为, 我们得想办法阻止表单的默认提交行为, 当用户没有填写数据或者是是数据不合法就不给这个表单提交?

只要当用户填写了合法的数据才让它提交

阻止表单的默认提交行为有两种方式：

1、如果onsubmit这个事件是行内绑定时 需要有两个return

<script type="text/javascript">
//表单行内绑定时 如何阻止表单的默认提交行为？
function check_form(){
return false; // 一个return 是写在事件处理程序中, 另外一个return必须要写在行内

}
</script>
<form action="index.php" onsubmit="return check_form()">
用户名：<input type="text" name="username" /><br/>
密　码：<input type="password" name="pass" /><br/>
<input type="submit" value="提交" />
</form>

2 如果onsubmit这个事件是动态绑定时, 只需要有一个return false即可

<script type="text/javascript">
//第一步：当页面加载完成后
window.onload = function(){
//获取到id=form这个对象 然后给这个对象绑定一个onsubmit事件
//动态绑定
document.getElementById('form').onsubmit = function(){
return false; //可以阻止表单默认提交
}
}
</script>
<form action="index.php" id="form">
用户名：<input type="text" name="username" /><br/>
密　码：<input type="password" name="pass" /><br/>
<input type="submit" value="提交" />
</form>

表单的提交通常通过按钮或者具备按钮功能的图片来完成

<input type="submit" name="btnSubmit" id="btnSubmit" value="submit"/>
<input type="image" name="picSubmit" id="picSubmit" value="submit.jpg"/>

当用户单击其中一个按钮,或者按回车键就可以直接提交表单,无需其他的代码,可以在action中加入警告来检测表单是否提交;

<form method="post" name="myForm1" action="javascript:alert('Submitted');">

可以采用表单的submit()方法,这对于验证和提交表单都是十分有用的

var oForm = document.forms["myForm1"];
oForm.submit();

或者自定义按钮分配onclick()事件

<input type="button" value="Submit" onclick="document.forms['myForms'].submit()"/>

如果使用submit()方法来提交表单则不会触发<form>的onsubmit事件,这与提交按钮是不同的。

因此使用submit()方法来提交,所有验证表单的过程都应该在其之前完成。

web用户在提交表单时往往会由于网速过慢而反复单击提交按钮, 这对于服务器而言是很大的负担，

通过可以使用disabled属性来禁止这种行为，

<input type="button" value="Submit" onclick="this.disabled=true;this.form.submit();"/>