1, Get form
1. Document getelementbyid ("ID attribute value");
Get the form object through the id attribute value of the from tag
2. document. name attribute value of the form;
Get the form object through the name attribute value of the form
3. document.forms [subscript];
Get form elements by specifying Subscripts
4. document.forms [name attribute value of the form];
Get the form object through the name attribute value of the form
document.forms: get all the form objects in the HTML document
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
// 1. document.getElementById("id attribute value");
console.log(document.getElementById( "myform1" ));
// 2. document. name attribute value of the form;
console.log(document.myform2);
console.log("--------------------");
//Get all form objects
console.log(document.forms);
// 3. document.forms [subscript];
console. log(document.forms[0]);
// 4. document.forms [name attribute value of the form];
console.log( document.forms [ "myform2"]);
</script>2, Get form elements
1. Get input element
1. Document getelementbyid ("" ID attribute value ");
Get the form element object through the id attribute value of the element
2. Form object name attribute value of form element;
Obtained by the name attribute value of the corresponding element in the form object
3. document.getELementsByName("name attribute value");
Obtained from the name attribute value of the form element
4. document.getELementsByTagName("" tag name / element name ");
Get form element object by tag name
2. Get radio button
Note: for the same group of radio buttons, you need to set the same name attribute value
1. document. Getelementbyname ("" name attribute value "");
Obtained by the value of the name attribute
2. Judge whether the radio button is selected
checked status
In JS code
checked=true means checked
checked=false means unchecked
In HTML tags
checked=checked or checked means checked
If the checked property is not set, it means that it is not selected
3. Gets the value of the radio button
Element value;
3. Get multiple buttons
Same as radio button
4. Get drop-down options
1. Get the drop-down box object
var object = document Getelementbyid ("" ID attribute 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;
Note:
1. When obtaining the value of the selected item in the drop-down box: (value)
If the value attribute value is not set in the option tag, the value corresponding to the value attribute is obtained;
If the value attribute value is not set in the option tag, the text value in the option double tag is obtained
2. The selected shape of the drop-down box is old
Selected status: selected=selected, selected, selected = true
Unselected status: do not set the selected property, selected=false
<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 domain" />
Personal description:<textarea name="intro"></textarea>
<br />
<button type="button" onclick="getTxt();">Get element content</button>
<hr />
<br>
<input type="text" name="inputName" class="test" value="aaa"/>
<input type="radio" name="rad" class="test" value="1"/> male
<input type="radio" name="rad" class="test" value="2"/> female
<button type="button" onclick="getRadio()">Get radio button</button>
<hr>
<br>
Select all/Not at all: <input type="checkbox" id="control" onclick="checkAllonNot()" />
<button type="button" onclick="checkFan()">Reverse selection</button>
<br>
<input type="checkbox" name="hobby" value="sing"/>sing
<input type="checkbox" name="hobby" value="dance"/>dance
<input type="checkbox" name="hobby" value="rap"/>Rap
<button type="button">Get multiple selection buttons</button>
<br>
<hr>
<br>
come from:
<select id="ufrom" name="ufrom" >
<option value = "">Please select</option>
<option value="beijing" selected="selected">Beijing</option>
<option value="shanghai">Shanghai</option>
<option >Hangzhou</option>
</select>
<button type="button" onclick="getselect()">huo Pull down button</button>
</form>
<script type="text/javascript">
function getRadio(){
}
function checkFan(){
}
function getcheckBox(){
}
function getTxt(){
//1. document. Getelementbyid ("" ID attribute value ");
var uname = document.getElementById( "uname" ).value;
console.log(uname);
// 2. Form object name attribute value of form element;
var pwd = document.getElementById( "myform" ). upwd.value;
console.log(pwd) ;
// 3. document.getELementsByName("name attribute value");
var uno = document.getElementsByName( "uno")[0].value;
console.log(uno) ;
// 4. document.getELementsByTagName("tag name / element name");
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
function getselect(){
//Get drop-down box object
var ufrom = document.getElementById("ufrom" );
console.log(ufrom);
//Gets the drop-down option list of the drop-down box
var opts = ufrom.options;
console.log(opts)
//Gets the index of the selected item in the drop-down box
var index = ufrom.selectedIndex;
console. log("Subscript of the selected item:"+ index);
//Gets the value of the selected item in the drop-down box
var val = ufrom.value;
var a = 2;
console.log("The value of the selected item:" + val);
var val2 = ufrom.options[index].value;
console.log("The value of the selected item:"+ val2);//Gets the text of the selected item in the drop-down box
var txt = ufrom. options[index].text;
console.log("Text of the selected item:" + txt);
//Set Shanghai selected
ufrom.options[2].selected = true;
}
</script>3, Submit form
I. use the normal button type="button"
1. Bind the click event to the button and bind the function
2. In the function, perform form verification (non null verification, validity verification, etc.)
3. If the verification passes, submit the form manually
Form object submit();
II. Use the submit button type="submit"“
1. Bind the click event to the button and bind the function
2. The function needs to have a return value and return true or false (if return false, the form will not be submitted; if return true, the form will be submitted)
onclick = "return function name ()"
3. In the function, perform form verification (non null verification, validity verification, etc.)
4. If the verification passes, return true; If the verification fails, false is returned
III. use the submit button type="submit"“
1. Bind the click event to the button and bind the function
2. The function needs to have a return value and return true or false (if return false, the form will not be submitted; if return true, the form will be submitted)
onsubmit = "return function name ()"
3. In the function, perform form verification (non null verification, validity verification, etc.)
4. If the verification passes, return true; If the verification fails, false is returned
<form id="myform" name="myform" action="http://www.baidu.com" method="get" >
full name: <input name="uname" id="uname"/>
<span id="msg" style="font-size: 12px;color: red;"></span><br />
<button type="button" onclick="submitForm1()">Submit</button>
</form>
<hr>
<form id="myform2" name="myform2" action="http://www.baidu.com" method="get" >
full name: <input name="uname2" id="uname2"/>
<span id="msg2" style="font-size: 12px;color: red;"></span><br />
<button type="submit" onclick="return submitForm2()" >Submit</button>
</form>
<form id="myform3" name="myform3" action="http://www.baidu.com" method="get" >
full name: <input name="uname3" id="uname3"/>
<span id="msg3" style="font-size: 12px;color: red;"></span><br />
<button type="submit" onclick="return submitForm3()" >Submit</button>
</form>
<script type="text/javascript">
/**
*Use submit button type = submit ""
*Form verification
*Submit Form
*/
function submitForm2(){
//Get the value of the text box
var uname = document.getElementById( "uname2" ).value;
//Judge whether it is empty
if (isEmpty(uname)) {//Empty
//Set prompt (set the value of span element)
document.getElementById("msg2" ).innerHTML = "*Name cannot be empty! ";
//Block form submission
return false;
}
return true;
}
/**
*Use submit button type = submit ""
*Form verification
*Submit Form
*/
function submitForm3(){
//Get the value of the text box
var uname = document.getElementById( "uname3" ).value;
//Judge whether it is empty
if (isEmpty(uname)) {//Empty
//Set prompt (set the value of span element)
document.getElementById("msg3" ).innerHTML = "*Name cannot be empty! ";
//Block form submission
return false;
}
return true;
}
/**
*Use normal button type = button ""
*Form verification
*Submit Form
*/
function submitForm1() {
//Get the value of the text box
var uname = document.getElementById( "uname" ).value;
//Judge whether it is empty
if (isEmpty(uname)) {//Empty
//Set prompt (set the value of span element)
document.getElementById("msg" ).innerHTML = "*Name cannot be empty! ";
//Block form submission
return;
}
//Submit form manually
document.getElementById("myform" ) . submit();
}
/**
*Judge whether the string is empty
If it is empty, return true
If it is not empty, false is returned
*trim(o :String method to remove spaces before and after the string
* @param {object} str
*/
function isEmpty(str) {
//Judge whether it is empty
if ( str == null || str.trim() ==""){
return true;
}
return false;
}
</script>