应该熟知的表单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会有先获取焦点的不兼容的解析。
还是写写好了:
ie6、7、8在onchange事件中点击不会直接选中,需要点击两次,解决方法是:
A、通过绑定input的onclick = “this.blur()”;
B、通过触发input的onclick代替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(); }
——个人实践总结下来的一篇小博客