<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="myform1" name="myform1" action=""></form>
<form id="myform2" name="myform2" action=""></form>
<script type="text/javascript">
console.log(document.getElementById("myform1"));
console.log(document.myform2);
console.log(document.forms);
console.log(document.forms[0]);
console.log(document.forms['myform2']);
</script>
</body>
</html>
1.获取input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="myform" name="myform" action="" method="get">
姓名：<input type="text" id="uname" name="uname" value="zs" /><br>
密码：<input type="password" id="upwd" name="upwd" value="1234" /><br>
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明：<textarea name="intro"></textarea>
<br>
<button type="button" onclick="getTxt()">获取元素内容</button>
</form>
</body>
<script type="text/javascript">
function getTxt(){
var uname = document.getElementById("uname").value;
console.log(uname);
var pwd = document.getElementById("myform").upwd.value;
console.log(pwd);
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</script>
</html>
2.获取下拉选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id = "ufrom" name="uform">
<option value="-1">请选择</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
<option>杭州</option>
</select>
<button type="button" onclick="getSelect()">获取下拉选项</button>
</body>
<script type="text/javascript">
function getSelect(){
var ufrom = document.getElementById("ufrom");
console.log(ufrom);
var opts = ufrom.options;
console.log(opts);
var index = ufrom.selectedIndex;
console.log("选中项的下标："+index);
var val = ufrom.value;
console.log("选中项的值："+val);
var val2 = ufrom.options[index].value;
console.log("选中项的值："+val2);
var txt = ufrom.options[index].text;
console.log("选中项的文本："+txt);
}
</script>
</html>
1.普通按钮
- 判断字符串是否为空
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="myform" name="myform" action="https://www.baidu.com/" method="get">
姓名：<input name="uname" id="uname"/>
<span id="msq" style="font-size: 12px;color: red;"></span><br>
<button type="button" onclick="submitForm1()">提交</button>
</form>
</body>
<script type="text/javascript">
function submitForm1(){
var uname = document.getElementById("uname").value ;
if (isEmpty(uname)){
document.getElementById("msq").innerHTML="*姓名不能为空！";
return;
}
document.getElementById("myform").submit();
}
function isEmpty(str) {
if(str == null||str.trim()==""){
return true;
}
return false;
}
</script>
</html>
2.提交按钮1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="myform2" name="myform2" action="https://www.baidu.com/" method="get">
姓名：<input name="uname2" id="uname2"/>
<span id="msq2" style="font-size: 12px;color: red;"></span><br>
<button type="submit"onclick="return submitForm2()">提交</button>
</form>
</body>
<script type="text/javascript">
function isEmpty(str) {
if(str == null||str.trim()==""){
return true;
}
return false;
}
function submitForm2(){
var uname2= document.getElementById("uname2").value ;
if (isEmpty(uname2)){
document.getElementById("msq2").innerHTML="*姓名不能为空！";
return false;
}
return true;
}
</script>
</html>
3.提交按钮2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr>
<form id="myform3" action="https://www.baidu.com/" method="get" onclick="return submitForm3() ">
姓名：<input name="uname3" id="uname3"/>
<span id="msq3" style="font-size: 12px;color: red;"></span><br>
<button type="submit">提交</button>
</form>
</body>
<script type="text/javascript">
function isEmpty(str) {
if(str == null||str.trim()==""){
return true;
}
return false;
}
function submitForm3(){
var uname3= document.getElementById("uname3").value ;
if (isEmpty(uname3)){
document.getElementById("msq3").innerHTML="*姓名不能为空！";
return false;
}
return true;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test02(){
var xhr = new XMLHttpRequest();
xhr.open("GET","js/data.json",true);
xhr.send(null);
if(xhr.status==200){
console.log(xhr.responseText);
}
else{
console.log("状态码："+xhr.status+"原因："+xhr.responseText);
}
}
test02();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test02(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
xhr.open("GET","js/data.json",true);
xhr.send(null);
if(xhr.status==200){
console.log(xhr.responseText);
}
else{
console.log("状态码："+xhr.status+"原因："+xhr.responseText);
}
}
test02();
</script>
</body>
</html>
