当前位置：网站首页>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

原网站

版权声明
本文为[Shuiyin 569]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130802172539.html