表单脚本

JavaScript

提交表单

submit 事件在用户提交表单时触发，可以设置事件处理程序进行拦截、检查等操作：

const form = document.forms.name;
form.addEventListener('submit', function(e) {
    event.preventDefault();
}, false);

提交表单可以使用 formEle.submit()，此操作不会触发 submit 事件，所以一定要提前做好数据验证：

const form = document.forms.name;
form.submit();

提交表单时最大的问题就是重复提交，处理办法有：

• 第一次提交后就禁用提交按钮（设置 disabled = true）；
• 利用 onsubmit 事件处理程序取消后续的提交操作。

重置表单

使用 type=reset 的 input 或 button，点击时会触发 reset 事件，同样可以使用事件处理程序。

也可以通过 js 来重置表单：

const form = document.forms.name;
form.reset();

与 submit() 不同的是， reset() 会触发 reset 事件。

form.elements

获取表单中所有表单元素（input 等）的集合，可以通过表单元素的 name 属性获取：

var form = document.getElementById('form1');
// 获取第一个元素
var field1 = form.element[0];
// 获取 name="textbox1" 的元素
var field1 = form.element['textbox1'];
// 获取表单元素个数
var fieldCount = form.element.length

如果有多个表单元素用相同的 name，会返回一个 NodeList

修改表单字段的属性

var form = document.getElementById('myForm'）;
var field = form.element[0];
field.value = 'another value';
field.focus();
field.disabled = true;

选择框脚本

选择框是通过 select 和 option 元素构成的，HTMLSelectElement 类型提供了下列方法和属性：

• add(newOption, relOption) - 在 relOption 前插入新 option。
• options - 所有 option 的 HTMLCollection。
• remove(index) - 基于零的索引，移除给定位置的选项。
• selectedIndex - 选中项的索引，无则为 -1。
• size - 选择框中可见的行数。

option 的 selected 属性设置为 true 可将该 option 选中。