JS表单

JS表单

获取表单

• document.getElementById()：通过id属性值获取
• document.表单名称：通过name属性值获取
• document.forms：获取页面中所有的表单对象
  • document.forms[索引]
  • document.forms[表单名称]

获取表单元素

获取input元素

• 通过 id 获取：document.getElementById(元素 id);
• 通过 form对象.名称 形式获取：form对象.元素名称; 元素名称 – name属性值
• 通过 name 获取数组：document.getElementsByName(name属性值)[索引] //从 0开始
• 通过 tagName 获取数组：document.getElementsByTagName(‘input’)[索引] //从 0 开始

获取单选按钮

​ 前提：将一组单选按钮设置相同的name属性值

1. 获取单选按钮数组：document.getElementsByName(“name属性值”);
2. 遍历每个单选按钮，并查看单选按钮元素的checked属性
   • 若属性值为true表示被选中，否则未被选中
     • 选中状态设定：checked = ‘checked’ 或 checked = ‘true’ 或 checke
     • 未选中状态设定：没有checked属性 或 checked = ‘false’

获取复选框

​ 原理与单选按钮一样，只是复选框可以选择多个值

获取下拉选项

• 通过选中项的索引

  1. 获取 select 对象：var ufrom = document.getElementById(“ufrom”);
  2. 获取选中项的索引：var idx=ufrom.selectedIndex ;
  3. 获取选中项 options 的 value属性值：var val = ufrom.options[idx].value;
     • 注意：当通过options获取选中项的value属性值时:
       • 若没有value属性，则取option标签的内容
       • 若存在value属性，则取value属性的值
  4. 获取选中项 options 的 text：var txt = ufrom.options[idx].text;
     • 选中状态设定：selected = ‘selected’ 或 selected = ‘true’ 或 selected
     • 未选中状态设定：不设selected属性 或 selected= ‘false’

• 直接获取选中项的值

  1. 获取 select 对象：var ufrom = document.getElementById(“ufrom”);
  2. 获取选中项的值：var selected = ufrom.value;

提交表单

• 使用普通button按钮 + onclick事件 + 事件中编写代码:

  • 获取表单.submit();

• 使用submit按钮 + onclick = “return 函数()” + 函数编写代码:

  • 最后必须返回：return true|false;

• 使用submit按钮/图片提交按钮 + 表单onsubmit = “return 函数();” + 函数编写代码:

  • 最后必须返回：return true|false;