第十四章 表单脚本
1.阻止默认表单提交
1.提交表单数据
1.使用type=submit提交按钮
2.使用submit()：方法
注意：当用户点击提交按钮时，会触发submit事件，从而在这里我们有机会验证数据并决定要不要提交表单
1.preventnDefault(event):可以用在表单数据无效时不发给服务器，对于动态绑定的onclick 事件。
2.Submit（）方法也可以提交表单，但是不会触发submit事件，所以在使用时须先验证表单数据，
如：<%
response.write(trim(request.form("a")))
%>
<form name="myform" method="post" action="">
<input name="a" value="abc"><br>
<input type="submit" value="提交1" onClick="return checkform()">//onClick="return checkform()" IE可以阻止,FF可以阻止<br><br>
<input type="submit" value="提交2" onClick="checkform()">//onClick="checkform()" IE无法阻止,FF无法阻止<br><br>
<input name="submit3" type="submit" value="提交3">//submit3.attachEvent("onclick",checkform) IE可以阻止,FF无法阻止<br><br>
如果是直接写在onclick里面，我们直接用return checkform()就好了。<br>
问题是有时候，我们又不乐意写在DOM元素里，非要搞什么动态绑定click事件。<br>
动态绑定click事件请看提交3，IE可以阻止，FF无法阻止，浏览器不兼容！<br><br>
<!--以下两个是解决方案，提交4是直接写在onclick里面，提交5是动态绑定事件的情况 -->
<input type="submit" value="提交4" onClick="checkform_success(event)">//onClick="checkform_success(event)" IE可以阻止,FF可以阻止<br><br>
<input name="submit5" type="submit" value="提交5">//submit5.attachEvent("onclick",checkform_success) IE可以阻止,FF可以阻止<br><br>
</form>
<script>
if(document.all){//ie
document.myform.submit3.attachEvent("onclick",checkform);
document.myform.submit5.attachEvent("onclick",checkform_success);
}else{//ff
document.myform.submit3.addEventListener("click",checkform,false);
document.myform.submit5.addEventListener("click",checkform_success,false);
}
function checkform(){
if(document.myform.a.value=="abc"){
alert("验证不通过！");
returnfalse;
}
}
function checkform_success(e){
e=e||window.event;
if(document.myform.a.value=="abc"){
alert("验证不通过！");
if(document.all) e.returnValue=false;//ie,window.event.returnValue=false阻止元素默认行为
else e.preventDefault();//火狐,event.preventDefault阻止元素默认行为
}
}
</script>
return false不是取消事件冒泡，而是取消“浏览器默认行为”。比如一个链接<a href="http://zhidao.baidu.com">百度知道</a>当我们点击这个链接时，浏览器会自动跳转到：zhidao.baidu.com这个地址，这是浏览器的默认行为，如果我们这么做：<a href="http://zhidao.baidu.com" onclick="return false">百度知道</a>那么再次点击这个链接时，浏览器则不会进行跳转。
JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。 而该值决定了当前操作是否继续。当返回的是true时，将继续操作。当返回是false时，将中断操作。 而直接执行时（不用return）。将不会对window.event.returnvalue进行设置所以会默认地继续执行操作 详细说明如下：例如：当在 <a href="abc.htm" onclick="return add_onclick()">Open</a> 中如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外
2.重置表单数据
当用户点击重置按钮时，会触发reset事件，从而在这里我们有机会验证数据并决定要不要重置表单
3.访问表单方法
1.可以通过DOM访问表单（通过给表单添加Id来访问）
2.可以通过evements属性（该属性是所有表单元素的集合）类似数组，
a) 类如：获取表单中的打一个字段：
Var field=forn.evements[0]
4.表单共有属性
a) Disabled:布尔值，表示当前字段是否被禁用
b) Form:指向当前字段所属表单的指针，只读
c) Name:当前字段的name
d) readOnly:布尔值，表示当前字段是否只读
e) tabIndex:表示当前字段的切换（tab）序号
f) Tyep：当前字段的类型，如“checkbox ,radio”等
g) Value:当前字段要被提交到服务器上的值。
5.表单的共有方法
a) Focus():获得焦点
b) Blur():失去焦点
6.表单的事件
a) Blur:当失去焦点时触发
b) Change:对于<input>和<textarea>元素，在他们失去焦点且value的值改变时触发，对于<select>元素在其选项改变时触发
c) Focus:当前字段获得焦点时触发。
7.选择文本select（）方法
1.在调用select方法时，大多数浏览器都要把焦点设置在文本框中，
2.Select事件：在选择文本框中的文本时就会触发此事件，在调用select（）方法时也会触发此事件。
3.取得选择的文本属性：
a) selectionStart，
b) selectionEnd:
因为substring（）方法是基于字符串的偏移量操作，所以将selectionStart，selectionEnd传递给它就可以取得选中文本。
如：function getSelectedText(text){
Return textbox.value.substring(selectionStart,electionEnd);
}
8.过滤输入
1.根据keypress事件和preventnDefault()阻止默认行为可以判断屏蔽输入的字段，
如：keypress=function(event){
If（输入的不符合）{
执行：event.preventnDefault()
}
}
9.选择框脚本
1.独有的属性和方法
a)add(newOption,relOption)向控件中插入新<optioon>其位置在 relOption之前；
b)Multiple:布尔值，表示是否允许多项选择，
c)Remove（index）移除给定位置的选项，
d)selectedIndex:基于0的选项的索引，如果没有选中项则返回值为-1.对于支持多选的控件，只保存选项中的第一项索引，
e)Size:选项中可见的行数
注意：1.如果没有选中项，则选择框的value属性保存空字符串
2.如果有一项被选中，而且该项的value属性已经在HTML中被指定，则选择框的value属性等于选项中的value特性，即使value的特性值是空字符串，也同样遵循此条规则。
3.如果有一项被选中，该项的value属性在HTML中未被指定，则选择框的属性等于该项文本
4.如果有多项选中，则选择框的value属性将依据前两条规则取得第一选中项的值。以下
<select>
<option value=”sunnyvale，ca”>sunnyvale</option>
<option value=”Los Anggeles ,CA”>sunnyvale</option>
<option value=””>china</option>
<option>Australia</option>
如果用户选择了其中一项，则选项框的值是sunnyvale，ca,如果文本为“China”被选中，则选项框的值为空因为其value特性是空，如果选择最后一项，那么由于<option>中没有value特性所以选项框的值为Australia
2.option的属性
在DOM中每个<option>都有个HTMLOptionElement对象为便于访问数据，它具有以下属性：
a)index:当前选项option集合中的索引。
b)Label: 当前选项的标签
c)Selected:布尔值表示当前选项是否被选中，将这个属性设置为ture时可以选中当前选项。
d)Text:选项的文本
e)Value:选项的值。
3.选择选项
a)对于只选择一项的选择框，访问选中项的方式，就是使用selectesIndex属性
b)对于多选的选项框
取得某一项的索引，然后将其selected的属性设为ture,在允许多选的选项框中设置选项的selected属性，不会取消对其他选中项的选择。因此可以动态地选择任意多项，实际上selected的作用就是确定用户选择了哪一项，要取得所有选中的项，可以循环便利选项集合，然后测试每个选项的selected的属性。
4.添加选项
a) 使用Dom方法
Var newOption=document.createElement(“option”) //创建option节点
newOption.appendChild(document.createTextNode(“option text”));
//给节点插入文本内容
newOption.setAttribute(“value”,Option value) //设置节点的属性
selectbox.appendChild(newOption) //把该节点插入到selectbox.)
b)使用option构造函数
此函数接受两个参数：文本（text）和值（value）
Var newOption=new Option(“Option text”, “Option value”)
selectbox.appendChild(newOption);不适用于Ie
c)add()方法
两个参数：要添加的新选项和将位于新选项之后的选项，第二个参数可选，兼容DOMl浏览器要求第二个参数必须写，而且如果指定，该参数必须是新选项之后的索引，如设置为undefined，就可以在所有浏览器中都将新选项插入列表左后。
Var newOption=new Option(“Option text”, “Option value”)
selectbox.add(newOption,undefined);
5.移除选项
a）selectbox.removeChild(selectbox.option[0])移除第一项
b）Selectbox.remove(0)
c）selectbox.option[0]=null