表单处理
1.獲取表單方法
document.getElementById('myform')
document.getElementsByTagName('form')[0]
document.forms[0]
document.forms['yourform']? ?// 使用form的名稱下標(biāo)獲取元素
document.yourForm? // 使用name名稱直接獲取元素
PS: submit事件,用傳統(tǒng)的方式: object.onsubmit = function(){}
問題: submit事件,為什么要用form對(duì)象來觸發(fā)呢?為什么不能是input中的sub按鈕來觸發(fā)呢?
答: 把submit事件注冊(cè)到input中的submit按鈕,是無法出發(fā)到submit事件的,必須把submit事件綁定到form對(duì)象上,才可以觸發(fā)submit事件,只不過是觸發(fā)submit事件的流暢是點(diǎn)擊input中的submit按鈕而已
submit()方法可以讓非submit按鈕進(jìn)行提交,但是對(duì)象一定是form
<form id="myForm" name="yourFrom"><input type="text" name="user" value="123"><input type="button" value="提交" id="btn"></form><script type="text/javascript">var btn = document.getElementById('btn');var fm = document.getElementById('myForm');btn.onclick = function(){fm.submit();}</script>2.表單控件獲取
?
<form id="myForm" name="yourFrom"><input type="text" name="user" value="123"><input type="button" value="提交" id="btn" ></form><script type="text/javascript">var fm = document.getElementById('myForm');console.log(fm[0]) // 向下兼容,不推薦console.log(fm.length) // 向下兼容,不推薦console.log(fm.elements) // 表單空間集合 HtmlCollectionconsole.log(fm.elements.length) // 推薦console.log(fm.elements[0]) // HTMLInputElementconsole.log(fm.elements['user'])</script>?3.選擇框腳本
添加選項(xiàng)
<form id="myForm" name="yourFrom"><select name="city" multiple = 'multiple'><option value="上海">上海</option><option>無</option></select></form><script type="text/javascript">var city = document.getElementsByName('city')[0];// DOM添加// var option = document.createElement('option');// option.appendChild(document.createTextNode('北京 t'));// option.setAttribute('value','北京 t');// city.appendChild(option);// 使用option構(gòu)造函數(shù)添加var option = new Option('北京t','北京v');// city.appendChild(option); // IE不支持city.add(option, undefined) // 最佳兼容方案,如果把undefined換成數(shù)字或者null都會(huì)產(chǎn)生瀏覽器不兼容// city.remove(0) // 刪除第0個(gè)元素
單選框和復(fù)選框:
判斷checked = true 就行
轉(zhuǎn)載于:https://www.cnblogs.com/redpen/p/8835292.html
總結(jié)
- 上一篇: 三层架构和MVC一样吗?(区别)
- 下一篇: VS2013试用期结束后如何激活