Javascript高级程序设计第十四章（表单）

1.获取表单：通过 document.forms 可以取得页面中所有的表单。在这个集合里，可以通过数值索引或name值来取得特定的表单

2.提交按钮

<input type="image" src="graphic.gif"> 和 <input type="submit" value="Submit Form"> 或者 <button type="submit">Submit Form</button>是一样的，在单击或者回车键触发都可以提交表单

3.一些误解知识

①document.getElementById("myForm").submit()，在以调用 submit（）方法的形式提交表单时，不会触发submit事件，因此要记得在调用此方法前先验证表单数据。

②调用 reset() 与调用 submit() 方法不同，调用 reset() 方法会想单击重置按钮一样触发 reset 事件

③change 事件，对于 <input> 和 <textare> 元素，在它们失去焦点且 value 值发生改变时触发；对于 <select> 元素，在其选项改变时触发。并且 change 事件和 blur 事件的发生顺序并没有严格的规定

4.获取表单字段

每个表单都有 elements 属性，该属性是表单中所有表单元素的集合，有序地包含这表单中的所有字段，可以按照位置和 name 特性来访问它们。

如果有多个表单控件都在使用一个 name （如单选按钮），那么就会返回以该 name 命名的一个 Nodelist。

5.禁用表单字段（除 filedset 元素），防止表单被重复点击提交

(function(){
var form = document.forms[0];

//Code to prevent multiple form submissions
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);

//get the submit button
var btn = target.elements["submit-btn"];

//disable it
btn.disabled = true;

});

})();

注意，不能通过 onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的 submit 事件之前触发 click 事件，有的相反。

对于先触发 click 事件的浏览器，意味着会在提交表单发生之前禁用按钮，结果永远都不会提交表单？？？sorry，i don't understand,why??什么鬼？？

因此，最好是通过 submit 事件来禁用提交按钮。不过，这种方法不适合表单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit 事件

6.选择框脚本

① HTMLSelectElement 类型提供的属性和方法：

add(newOption, relOption),类似insertBefore，相反为remove(index)

options：控件中所有<option>元素的 HTMLCollection

selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为 -1

②选择框的 value 属性由当前选中项决定，相应规则如下：

a.如果没有选中的项，则选择框的 value 属性保存空字符串

b.如果有一个选中项，而且该项的 value 特性已经在HTML中指定，则选择框中的 value 属性等于该选中项的 value 特性。即使value 特性的值是空字符串，也同样遵循词条规则

c.如果有一个选中项，但该项的 value 特性未在 HTML 中指定，则选择框的 value 属性等于该项的文本

d.如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值

③HTMLOptionElement

index：当前选项在 options 集合中的索引

selected：布尔值，表示当前选项是否被选中。true | false。注意点：在允许多选的选择框中设置选项的 selected 属性，不会取消对其他选中项的选择，但在单选选择框中，修改某个选项的 selected 属性则会取消对其他选项的选择。特别注意的是，将 selected 属性设置为 false 对单选选择框没有影响

text：选项的文本

③添加新项最佳方案

var newOption = new Option("option text", "option value");

selectBox.add(newOption, undefined);   //最佳方案

在IE 和 兼容 DOM的浏览器中，上面的代码都可正常使用。如果你想把新项添加到其他位置（不是最后一个位置），就应该使用标准的 DOM 技术和 insertBefore() 方法

标准的DOM方法是指：

var newOption = document.createElement("option");

newOption.appendChild(document.createTextNode("option text"));

newOption.setAttribute("value", "option value");

selectbox.appendChild(newOption);

为什么上面的不用new Option() 构造 函数呢？因此在不兼容DOM的浏览器会创建一个 object 的实例，而不是兼容 DOM的浏览器中返回的一个 <option> 元素（IE-版本中有问题）

7.表单序列化

在编写代码之前，必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。

①对表单字段的名称和值进行 URL 编码，使用合号（&）分隔

②不发送禁用的表单字段

③只发送勾选的复选框和单选按钮

④不发送 type 为“reset” 和 “button” 的按钮

⑤多选选择框中的每个选中的值单独一个条目

⑥在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type 为 “image” 的 <input> 元素 ？？？？？

⑦<select> 元素的值，就是选中的 <option> 元素的 value 特性的值。如果 <option> 元素没有 value 特性，则是 <option>元素的文本值