JS获取表单中的元素和取值方法
获取表单的四种方式
- 1、document.表单名称
- 2、document.getElementById(表单 id);
- 3、document.forms[表单名称]
- 4、document.forms[索引]; //从 0 开始
<body>
<!--
获取表单
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始
-->
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
<script type="text/javascript">
//1、document.表单名称
var form = document.myform;
console.log(form);
//2、document.getElementById(表单 id);
var myform2 = document.getElementById("myform2");
console.log(myform2);
//3、document.forms[表单名称]
var forms = document.forms;
console.log(forms);
console.log(forms['myform2']);
//4、document.forms[索引]; //从 0 开始
console.log(forms[0]);
</script>
</body>
表单的元素以及值获取
<body>
<!--
获取元素的值
获取表单元素的值
表单元素节点.value; 取值
表单元素节点.value = "值"; 设置值
文本框，密码框，单选，多选
获取非表单元素的内容
元素节点.innerHtml = "值"; 设置值
元素节点.innerHtml; 取值
获取input元素
1)、通过 id 获取： document.getElementById(元素 id);
2)、通过 form.名称 形式获取: myform.元素名称; name属性值
3)、通过 name 获取 数组 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
获取单选按钮
前提：将一组单选按钮设置相同的name属性值
(1)获取单选按钮组：
document.getElementsByName("name属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有checked属性 或 checked='false'
多选框
前提：设置一组多选框为相同name属性值
(1)获取多选按钮组：
document.getElementsByName("name属性值");
(2)遍历每个多选按钮，并查看多选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有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属性
-->
<form id='myform' name="myform1" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >获取元素内容</button>
</form>
<!-- 操作单选 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
<button type="button" onclick="getRadio();" >获取单选内容</button>
</form>
<!-- 操作多选 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="checkbox" name="hobby" value="1" /> 1
<input type="checkbox" name="hobby" value="2" /> 2
<input type="checkbox" name="hobby" value="3" /> 3
<button type="button" onclick="getCheckbox();" >获取多选内容</button>
</form>
<!-- 获取下拉框 -->
<form id='myform' name="myform9" action="" method="">
来自:
<select id="ufrom" name="ufrom">
<option value="-1" >请选择</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" onclick="getSelect();" >获取多选内容</button>
</form>
<script type="text/javascript">
//获取元素内容
function getTxt(){
// 1)、通过 id 获取：document.getElementById(元素 id);
var uname = document.getElementById("uname");
console.log(uname.value);
//2)、通过 form.名称形式获取: myform.元素名称; name属性值
var upwd = document.myform1.upwd;
console.log(upwd);
console.log(upwd.value);
//3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
var hid = document.getElementsByName("uno")[0];
console.log(hid.value);
// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
var texta = document.getElementsByTagName("textarea")[0];
console.log(texta.value);
}
//获取单选按钮中选中项
function getRadio(){
//获取所有单选
var rads = document.getElementsByName("rad");
//遍历每个单选
for(var i = 0; i < rads.length; i++){
if(rads[i].checked){
console.log(rads[i].value);
}
}
}
//获取多选按钮中选中项
function getCheckbox(){
//获取所有多选
var hobbys = document.getElementsByName("hobby");
//遍历每个多选
var str ="";
for(var i = 0; i < hobbys.length; i++){
if(hobbys[i].checked){
str += hobbys[i].value + ",";
}
}
console.log(str.substring(0,str.length-1));
}
//获取下拉选项
function getSelect(){
//获取下拉框
var select = document.getElementsByName("ufrom")[0];
//获取下拉框的选项
var options = select.options;
//获取下拉框选中索引
var index = select.selectedIndex;
//获取选中项
console.log(options[index]);
//获取选中项的值
console.log(select.value);
}
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Ajax中通过JS代码自动获取表单元素值的示例代码
我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了. function getFormQueryString(frmID) //frmID是表单的ID号,请在表单form中先命名一个ID号 { var frmID=document.getElementById(f
-
AngularJS实现表单元素值绑定操作示例
本文实例讲述了AngularJS实现表单元素值绑定操作.分享给大家供大家参考,具体如下: ng-disabled:绑定控件的disabled属性 ng-show:显示或者隐藏元素:ms-visible ng-hide:和ng-show的功能恰好相反 css内容: div.d1{ width: 20px; height: 20px; background-color: pink; } div.d2{ width: 20px; height: 20px; background-color: blac
-
表单元素值获取方式js及java方式的简单实例
大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢? 多说无用.上代码: Jsp-html代码: <form action="input.do" name="formkk"> <table>
-
JavaScript获取表单内所有元素值的方法
本文实例讲述了JavaScript获取表单内所有元素值的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.aspx"> First name: <input type="text" name="fname
-
javascript 清空form表单中某种元素的值
下面就以情况type="text"为例: 复制代码 代码如下: <form id="form1" method="post"> <input type="text" /> <input type="text" /> <input type="button" value="clear" onclick="Refresh
-
JS获取表单中的元素和取值方法
获取表单的四种方式 1.document.表单名称 2.document.getElementById(表单 id); 3.document.forms[表单名称] 4.document.forms[索引]; //从 0 开始 <body> <!-- 获取表单 1.document.表单名称 2.document.getElementById(表单 id); 3.document.forms[表单名称] 4.document.forms[索引]; //从 0 开始 --> <
-
vue.js select下拉框绑定和取值方法
最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="
-
js简单获取表单中单选按钮值的方法
本文实例讲述了js简单获取表单中单选按钮值的方法.分享给大家供大家参考,具体如下: HTML部分如下: <form> <tr bgcolor="#FFFFFF"> <td width="84" height="23" rowspan="3" align="center" valign="middle" bordercolor="#999999&qu
-
JS实现表单中点击小眼睛显示隐藏密码框中的密码
领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px
-
JS实现表单中checkbox对勾选中增加边框显示效果
本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果.分享给大家供大家参考.具体如下: 这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果.貌似目前比较流行的效果啦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-checkbox-check-border-show-codes/ 具体代码如下: <!doctype html
-
js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f
-
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
jQuery对html元素的取值与赋值实例详解
本文实例讲述了jQuery对html元素的取值与赋值方法.分享给大家供大家参考,具体如下: Jquery给基本控件的取值.赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value&qu
-
JS获取鼠标位置距浏览器窗口距离的方法示例
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法.分享给大家供大家参考,具体如下: 先来看看运行效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test_div { width:400px; height: 400px;
-
Js 获取、判断浏览器版本信息的简单方法
Navigator 对象包含有关浏览器的信息: •appCodeName -- 浏览器代码名的字符串表示 •appName -- 官方浏览器名的字符串表示 •appVersion -- 浏览器版本信息的字符串表示 •cookieEnabled -- 如果启用cookie返回true,否则返回false •javaEnabled -- 如果启用java返回true,否则返回false •platform -- 浏览器所在计算机平台的字符串表示 •plugins -- 安装在浏览器中的插件数组 •t