JS document form表单元素操作完整示例
本文实例讲述了JS document form表单元素操作。分享给大家供大家参考，具体如下：
<html>
<head>
<title>form表单操作</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testForm(){
// 获取form对象 方法一,通过id,比较普遍的方法
var fm=document.getElementById("fm");
alert(fm); //输出fm的类型[object HTMLFormElement]
alert(fm.length); //输出所用的表单项(表单类型参考Lgin.html)输出值为8
// 获取form对象 方法二，通过name,算是一个特殊的的方法
var frm=document.frm;
alert(frm);
alert(frm.length);
alert(fm===frm); //返回值为true,其无论是类型还是内容都是一样的，其本来就是同一个对象
}
function testOper(){
var fm=document.getElementById("fm");
// 输出表单的元素
// alert(fm.elements); //显示表单元素的类型[object HTMLFormControlsCollection]
// alert(fm.elements.length); //显示表单元素的个数
// 利用表单的action属性进行访问地址的动态改变
fm.action="http://www.baidu.com";
alert(fm.action); //返回了action的值
// 利用表单的submit属性使普通的按钮也具有提交功能
// fm.submit(); //可以直接访问修改后的网址
// alert(fm.submit()); //执行了submit操作并且返回了undefined
}
function testCheck(){
// 获取checkbox的对象
var fav=document.getElementsByName("fav");//通过Id无法获取，但是通过Name
// 实现选中遍历打印操作
for(var i=0;i<fav.length;i++){
if(fav[i].checked){ //
alert(fav[i].value); //其中fav没有值，但是fav.value有值，无法打印fav,但是可以打印fav.value
}
}
}
// 实现全选操作
function checkBoxselect(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=true;
}
}
// 实现清空选择操作
function checkBoxclear(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){
fav[i].checked=false;
}
}
// 实现反选操作
function checkBoxchange(){
var fav=document.getElementsByName("fav");
for(var i=0;i<fav.length;i++){ //=是赋值符==和===才是判断符
if(fav[i].checked){
fav[i].checked=false;
}else{
fav[i].checked=true;
}
}
}
function selectoper(){
// 获取单选框对象
var sel=document.getElementById("Animation");
// 获取单选框内的选项
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].value+":"+os[i].text);
}
}
}
</script>
</head>
<body>
<h3>form表单操作</h3>
<!--添加readonly表示标签只能读，添加disabled标签表示该标签不能进行任何操作-->
<input type="button" name="" id="" value="测试form表单" onclick="testForm()" />
<input type="button" name="" id="" value="测试form表单基本操作" onclick="testOper()" />
<input type="button" name="" id="" value="测试form表单checkbox" onclick="testCheck()" />
<input type="button" name="" id="" value="测试form表单checkbox全择" onclick="checkBoxselect()" />
<input type="button" name="" id="" value="测试form表单checkbox清空选择" onclick="checkBoxclear()" />
<input type="button" name="" id="" value="测试form表单checkbox反选" onclick="checkBoxchange()" />
<input type="button" name="" id="" value="测试form表单select操作" onclick="selectoper()" />
<hr />
<form action="#" method="get" id="fm" name="frm" target="_blank">
<b>用户名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
<b>密码</b><input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
<br />
爱好 <br />
动漫<input type="checkbox" name="fav" id="fav" value="动漫" checked="false"/><br />
游戏<input type="checkbox" name="fav" id="fav" value="游戏" checked="false"/><br />
电影<input type="checkbox" name="fav" id="fav" value="电影" checked=""true/><br />
敲代码<input type="checkbox" name="fav" id="fav" value="敲代码" checked="false"/><br />
<br /><br />
<select name="" id="Animation">
<option value="">clannad</option>
<option value="">花开物语</option>
<option value="">未闻花名</option>
<option value="">四月是你的谎言</option>
</select>
<br /><br />
<input type="submit" name="" id="" value="登录" />
</form>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JavaScript——DOM操作——Window.document对象详解
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById("id");将找到的元素放在变量中: docunment.getElementsByName("name"):根据name找,找出来的是数组: docunment.getElementsByTagName("name"):根据标签名找,找
-
原生js操作checkbox用document.getElementById实现
jquery与checkbox的checked属性的问题,讲的是控件<input type="checkbox"></input> 1.页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化 2.checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系 3.使用document.g
-
JavaScript入门教程(9) Document文档对象
描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.a
-
JavaScript基础语法、dom操作树及document对象
第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为
-
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素
-
JS document文档的简单操作完整示例
本文实例讲述了JS document文档的简单操作.分享给大家供大家参考,具体如下: <html> <head> <title>js-documnent文档结构操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testFile(){ // 获取元素 var showdiv=document.ge
-
JavaScript中的Document文档对象
Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fg
-
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body
-
JavaScript 节点操作 以及DOMDocument属性和方法
属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回
-
JS document form表单元素操作完整示例
本文实例讲述了JS document form表单元素操作.分享给大家供大家参考,具体如下: <html> <head> <title>form表单操作</title> <meta charset="UTF-8"/> <script type="text/javascript"> function testForm(){ // 获取form对象 方法一,通过id,比较普遍的方法 var fm=d
-
JavaScript实现动态添加Form表单元素的方法示例
本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo
-
JS提交form表单实例分析
本文实例讲述了JS提交form表单.分享给大家供大家参考,具体如下: 一.javascript 页面加裁时自动提交表单: Form表单: <form method="post" id="myform" action="a.php"> <input type="submit" value="提交表单"> </form> javascript 代码: <script t
-
jQuery实现form表单元素序列化为json对象的方法
本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&
-
JS组件Form表单验证神器BootstrapValidator
本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
-
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +
-
js提交form表单,并传递参数的实现方法
//增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF
-
js获取form表单所有数据的简单方法
在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen
-
js 提交form表单和设置form表单请求路径的实现方法
如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~