应该熟知的表单js应用(select、label、submit)

前言

 首先需要清楚的是,表单传数据方式,有POST和GET的方式,通过name和对应的value值提交到后台。通过name,可以用对象属性调用的方式获取对应的input标签,如:

document.formName.iptName.iptVal  //获取input的value值
<input type=”hidden” name=”xxx” value=”xxx” /> //隐藏的参数可以这样提交

一,SELECT

1、基本属性和方法

//select
select.options          // 获取所有option
select.value            //选中的option的value
select.selectedIndex    //选中的option的序号
select.options.add(new Option(text,value))  //增加option
select.options.remove(i)      //移除i序号的option

//option
options[select.selectedIndex] //当前选中的option
options[?].value/.text        //option的value属性和对应的文本值
options[?].selected = true    //选中当前option
options[?] = null             //删除当前option

2、select事件

select.onchange = func;  //改变下拉框选项时触发

二,LABEL

1,根据label的for属性指向input的id,实现点击文字选中

//设置相同的name则只能选一个,for指向对应的id,这样点击文字可以选择对应的input
<input type="radio" name="hehe" id="a" value="" />
<label for="a">one</label>

<input type="radio" name="hehe" id="b" value="" />
<label for="b">two</label>

 2,把input写在label里边,点击文字也会选中

//input写label里边,点击文字可选中,注意for要去掉
<label><input type="radio" name="hehe" value="" />one</label>
<label><input type="radio" name="hehe" value="" />two</label>

注意:radio和check事件选中调用 onclick比较好,onchange在ie6/7/8会有先获取焦点的不兼容的解析。

还是写写好了:

  ie678onchange事件中点击不会直接选中,需要点击两次,解决方法是:

      A、通过绑定inputonclick = this.blur();

      B、通过触发inputonclick代替onchange选中(通过label事件可以触发对应的input事件);

三,SUBMIT

1,input submit触发

//提交前调用的事件,return false则不提交
document.formName.onsubmit = func;

 2,button 或 其他点击 submit触发

//一般的button表示
<input type="button" value="点击我" name="btn" />

//更实用的button,可以放置文字,图片等,此处的type属性不要去掉,因为button不同浏览器的默认type不一样。
<button type="button" name="btn">点击我</botton>

//button的提交,注意这个submit()不会触发onsubmit事件
document.formName.btn.onclick = function(){
    document.formName.submit();
}

——个人实践总结下来的一篇小博客

原文地址:https://www.cnblogs.com/xinghh/p/3493099.html