I form
Get common forms (first two)
1)document. name attribute value of the form
Get the form object through the name attribute value of the form.
2)document.getElementId("id attribute value");
Get the form object through the id attribute value of the from tag.
3)document.forms [name attribute value of the form]
Get the form object through the name attribute value of the form.
4)document.forms [index (subscript)]// Start from 0
Gets the specified element by specifying a subscript.
Note: document Forms: get all the form objects in the HTML document.
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 by the value of the name attribute of the form element.
4) document.getElementsByTagName ("tag name / element name");
Get the form element object by tag name.
<body> <!-- Form example 2 --> <form id='myform' name='myform' action="" method="get"> <!-- Text box --> full name: <input type="text" id="uname" name="uname" value="zhangsan" /> <br /> <!-- Password box --> password: <input type="password" id="upwd" name="upwd" value="1234" /> <br /> <!--Hidden domain --> <input type="hidden" id="uno" name="uno" value="Hidden domain" /> <!-- Text field --> Personal description : <textarea name="intro"></textarea><br> <button type="button" onclick="getTxt();">Get element content</button> </form> </body>
Set the function getTxt() of the form example
<script>
// Get form elements
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);
}
</script>2. Get radio button
3. Get multi selection button (similar to multi selection)
4. Get drop-down options
1) Get drop-down object
var object = document Getelementbyid ("ID attribute value");
2) Gets the drop-down option list of the drop-down box
var # options = drop-down box object options；
3) Gets the index of the selected item in the drop-down box
var index = drop-down box object selectedIndex；
4) Gets the value of the selected item in the drop-down box
var value = drop-down box object value；
5) Get the selected subscript value through the drop-down box
var value = drop-down box object options[index].value；
6) Gets the text of the selected item in the drop-down box
var text value = drop-down box object options[index].text；
<form> <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()">Get drop-down options</button> </form>
<script>
//Get drop-down options
function getSelect() {
//Get drop-down object
var uform = document.getElementById("uform");
console.log(uform);
//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;
console.log("Value of the selected item:" + val);
//Obtain the selected value of the drop-down box through the subscript of the selected item
var val2 = ufrom.options[index].value;
console.log("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 selected Shanghai
ufrom.options[2].selected = true;
}
</script>Note:
1. When getting the value of the selected item in the drop-down box: (value)
If the value attribute is set in the option tag, the value corresponding to the value attribute is obtained.
If the value attribute is not set in the option tag, the text value in the option double tag is obtained.
2. Selected options in the drop-down box:
Selected status: selected = selected, selected, selected = true
Unselected status: do not set the selected property, selected = false
3. Submit form
(1) . 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, the form object will be submitted manually submit
(2) . 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, which returns true or false (if return is false, the form will not be submitted; if return is true, the form will be submitted)
3. In the function, perform form verification (non null verification, validity verification, etc.)
4. Returns true if the verification passes, and false if the verification fails
(3) . use the submit button {type="submit"
1. Bind submit to the form from element, submit the event, and bind the function
2. The function needs to have a return value, which returns true or false (if return is false, the form will not be submitted; if return is true, the form will be submitted)
3. In the function, perform form verification (non null verification, validity verification, etc.)
4. Returns true if the verification passes, and false if the verification fails
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<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" 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>
<hr />
<form id="myform3" action="http://www.baidu.com" method="get" onsubmit="return SubmitForm3()">
full name:<input name="uname3" id="uname3" />
<span id="msg3" style="font-size: 12px;color: red;"></span><br />
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
function SubmitForm1(){
var uname=document.getElementById("uname").value;
if (isEmpty(uname)){
document.getElementById("msg").innerHTML="*Name cannot be empty";
}
document.getElementById("myform").submit();
}
function isEmpty(str){
if(str == null||str.trim() ==""){
return true;
}
return false;
}
function SubmitForm2(){
var uname=document.getElementById("uname2").value;
if (isEmpty(uname)){
document.getElementById("msg2").innerHTML="*Name cannot be empty";
return false;
}
return true;
}
function SubmitForm3(){
var uname=document.getElementById("uname3").value;
if (isEmpty(uname)){
document.getElementById("msg3").innerHTML="*Name cannot be empty";
return false;
}
return true;
}
</script>
</body>
</html>
II Jquery - native Ajax implementation process
1. Get XMLHttpRequest();
var xhr = new XMLHttpRequest();
2. Open request
xhr.open(method,url,async);
Method: request method, usually get|post
url # request address
async # is asynchronous. If true indicates asynchrony, false indicates synchronization
3. Send request
xhr.send(params);
params: parameters to be passed when requesting
If it is a get request, set null. (the parameters of the get request are set after the url)
If it is a post request, no parameter is set to null. If there are parameters, set the parameters
4. Receive response
xhr.status = response status (200 = successful response, 404 = resource not found, 500 = server exception)
xhr.responseText get response text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function text01() {
var xhr = new XMLHttpRequest();
xhr.open("get", "js/date.json", false);
xhr.send(null);
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("Status code:" + xhr.status + "，reason:" + xhr.responseText)
}
console.log("Synchronization request...");
}
function text02() {
var xhr = new XMLHttpRequest();
xhr.open("get", "js/date.json", true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log("Status code:" + xhr.status + "，reason:" + xhr.responseText)
}
}
}
console.log("Asynchronous request...");
}
text02();
</script>
</body>
</html>