当前位置:网站首页>JS form get form & get form elements
JS form get form & get form elements
2022-07-07 04:24:00 【Shuiyin 569】
Forms are a very common way for our pages to transfer data to the background , Sending data ( Request issued ) Before , We should now carry out a series of data validation on the page , Save unnecessary wrong data transmission , And improve the user experience .
1. Get the form
The first two are commonly used
1、document.getElementById("id Property value "); adopt form Labeled id Attribute value acquisition form
2、document. Form name Property value ; Through the form name Get form object from property value
3、document.forms[ Subscript ] Get form elements by specifying subscripts
4、document.forms[ Form name Property value ]; Through the form name Get form object from property value
document.forms: obtain HTML All form objects in the document
for example :
<body>
<form id='myform' name="myform" action=""method="post"></form>
<form id='myform2' name="myform2" action="" method="post"</form>
</body>
<script>
// Four ways
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>
2. Get form elements
2.1. obtain input Elements
Such as text password hidden textarea etc. , The first two are commonly used .
1. document.getElementById("id Property value "); By element id Property value to get the form element object
2. Form object . Of the form element name Property value ;
Through the of the corresponding element in the form object name Property value get
3. document.getELementsByName("name Property value "); Through the... Of form elements name Property value get
4. document.getELementsByTagName(" Tag name / Element name ");
Get the form element object by tag name
<body>
<form id='myform' name="myform" action="" method="get">
full name :<input type="text" id="uname" name="uname" value="zs"/><br />
password :<input type="password"id="upwd" name="upwd" value="1234"/><br />
<input type="hidden"id="uno" name="uno" value=" Hidden fields ”/>
Personal instructions :<textarea name="intro"></textarea>
<button type="button"onclick="getTxt();"> Get element content </button>
</form>
</body>
<script>
function getTxt()(
var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + “--------");
var upwd = document.getElementsByTagName('input')[1];
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +", "+ uname.value +","+ upwd.value +", "+ intro.value);
</script>
2.2. Get radio button
notes : The same set of radio buttons , You need to set the same name Property value
1. document.getElementByName("name Property value "); adopt name Property value get
2. Judge whether the radio button is selected
checked Selected state
stay JS In the code
checked=true Indicated selection
checked=false It means not to choose
stay HTML In the label
checked=checked or checked Indicated selection
Not set up checked attribute It means not to choose
3. Get the value of the radio button
Elements .value;
2.3. Get the multi-choice button
Same as radio button
2.4. Get drop-down options
1. Get the dropdown object
var object =document.getElementById("id Property value ”);
2. Get the drop-down option list of the drop-down box
var options = Drop down box object .options;
3. Get the index of the selected item in the drop-down box
var index = Drop down box object .selectedIndex;
4. Get the value of the selected item in the drop-down box
var value = Drop down box object .value;
5. Obtain the value of the selected item in the drop-down box through the subscript of the selected item
var value = Drop down box object .options[index].value;
6. Get the text of the selected item in the drop-down box
var Text value = Drop down box object .options[index].text;
notes :
1. When getting the value of the selected item in the drop-down box : (value)
If option The label is set value Property value , Then get value The value of the property ;
If option Label not set value Property value , What you get is option Text value in double label
2. The selected state of the drop-down box :
Selected state :selected selected、selected、selected=true
Unchecked state : Not set up selected attribute 、selected=false
边栏推荐
- ABAP dynamic inner table grouping cycle
- Food Chem|深度学习根据成分声明准确预测食品类别和营养成分
- [system management] clear the icon cache of deleted programs in the taskbar
- 深耕开发者生态,加速AI产业创新发展 英特尔携众多合作伙伴共聚
- How do test / development programmers get promoted? From nothing, from thin to thick
- [team learning] [34 issues] scratch (Level 2)
- 杭州电 3711 Binary Number
- Implementation of binary search tree
- Golang calculates constellations and signs based on birthdays
- Using thread class and runnable interface to realize the difference between multithreading
猜你喜欢
Operational amplifier application summary 1
[team learning] [34 issues] scratch (Level 2)
Win11远程桌面连接怎么打开?Win11远程桌面连接的五种方法
史上最全MongoDB之Mongo Shell使用
Surpassing postman, the new generation of domestic debugging tool apifox is elegant enough to use
Some common software related
用头像模仿天狗食月
Ssm+jsp realizes the warehouse management system, and the interface is called an elegant interface
机器人(自动化)课程的持续学习-2022-
这项15年前的「超前」技术设计,让CPU在AI推理中大放光彩
随机推荐
POJ培训计划2253_Frogger(最短/floyd)
Kotlin compose text supports two colors
[team learning] [34 issues] scratch (Level 2)
用头像模仿天狗食月
机械臂速成小指南(十):可达工作空间
How do test / development programmers get promoted? From nothing, from thin to thick
Food Chem | in depth learning accurately predicts food categories and nutritional components based on ingredient statements
史上最全MongoDB之部署篇
Hangzhou Electric 3711 binary number
Implementation of map and set
2022 middle school Youth Cup mathematical modeling question B fertility policy research ideas under the background of open three children
Operational amplifier application summary 1
UltraEdit-32 温馨提示:右协会,取消 bak文件[通俗易懂]
【写给初发论文的人】撰写综述性科技论文常见问题
In cooperation with the research team of the clinical trial center of the University of Hong Kong and Hong Kong Gangyi hospital, Kexing launched the clinical trial of Omicron specific inactivated vacc
NFT meta universe chain diversified ecosystem development case
2022电工杯A题高比例风电电力系统储能运行及配置分析思路
Win11图片打不开怎么办?Win11无法打开图片的修复方法
NanopiNEO使用开发过程记录
英特尔与信步科技共同打造机器视觉开发套件,协力推动工业智能化转型