当前位置:网站首页>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
边栏推荐
- NFT meta universe chain diversified ecosystem development case
- 机器人(自动化)课程的持续学习-2022-
- Analysis on urban transportation ideas of 2022 Zhongqing cup C
- 【自动化经验谈】自动化测试成长之路
- Continuous learning of Robotics (Automation) - 2022-
- Kotlin compose text supports two colors
- PHP 实现根据概率抽奖
- Mathematical analysis_ Notes_ Chapter 10: integral with parameters
- Analysis on the thinking of college mathematical modeling competition and curriculum education of the 2022a question of the China Youth Cup
- Food Chem | in depth learning accurately predicts food categories and nutritional components based on ingredient statements
猜你喜欢
[multi threading exercise] write a multi threading example of the producer consumer model.
[coded font series] opendyslexic font
Win11玩绝地求生(PUBG)崩溃怎么办?Win11玩绝地求生崩溃解决方法
英特尔David Tuhy:英特尔傲腾技术成功的原因
Opencv third party Library
【OA】Excel 文档生成器: Openpyxl 模块
CUDA Programming
Imitate Tengu eating the moon with Avatar
超越Postman,新一代国产调试工具Apifox,用起来够优雅
Food Chem|深度学习根据成分声明准确预测食品类别和营养成分
随机推荐
ABAP 动态内表分组循环
Opencv third party Library
easyui出口excel无法下载框弹出的办法来解决
机器人(自动化)课程的持续学习-2022-
科兴与香港大学临床试验中心研究团队和香港港怡医院合作,在中国香港启动奥密克戎特异性灭活疫苗加强剂临床试验
Food Chem|深度学习根据成分声明准确预测食品类别和营养成分
The most complete security certification of mongodb in history
2022 middle school Youth Cup mathematical modeling question B fertility policy research ideas under the background of open three children
用头像模仿天狗食月
Collection of idea gradle Lombok errors
Nanopineo use development process record
ABAP Dynamic Inner table Group cycle
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
见到小叶栀子
Digital chemical plant management system based on Virtual Simulation Technology
【ArcGIS教程】专题图制作-人口密度分布图——人口密度分析
Some common software related
【编码字体系列】OpenDyslexic字体
[leetcode]Spiral Matrix II
Use facet to record operation log