<!--
提交表单
一、使用普通按钮 type="button"
1、给按钮绑定click点击事件，绑定函数
2、在函数中，进行表单效验（非空效验，合法性效验）
3、如果效验通过，则手动提交表单
表单对象.submit();
二、使用提交按钮 type="submit"
1、给按钮绑定click点击事件，绑定函数
2、函数要有返回值----返回未true执行 否则不执行
3、在函数中校验
4、通过 true 不通过 false
三、 使用提交按钮 type="submit"
1、给表单form元素绑定submit提交事件，绑定函数
2、函数要有返回值----返回未true执行 否则不执行
οnsubmit="return submitForm3()"
-->
<!-- 1、使用普通按钮 type="button" -->
<form id="myform" name="myform"action="http://www.baidu.com" method="get">
姓名:<input type="" name="uname" id="uname" value="" />
<span id="msg" style="font-size: 12px;color:red;"></span><br>
<button type="button"onclick="submitForm1()">提交</button>
</form>
<hr >
<!-- 2、 -->
<form id="myform2" name="myform2"action="http://www.baidu.com" method="get">
姓名:<input type="" name="uname2" id="uname2" value="" />
<span id="msg2" style="font-size: small;red;"></span><br>
<button type="submit"onclick=" return submitForm2()">提交</button>
</form>
<!-- 3、 -->
<form id="myform3" onsubmit="return submitForm3()"name="myform3"action="http://www.baidu.com" method="get">
姓名:<input type="" name="uname3" id="uname3" value="" />
<span id="msg3" style="font-size: small;red;"></span><br>
<button type="submit">提交</button>
</form>
console.log("--------------")
function submitForm1(){
//得到文本框的值
var uname=document.getElementById("uname").value;
//判断是否为空
if(isEmpty(uname)){//true
//为空 设置提示信息
document.getElementById("msg").innerHTML="*不能为空";
//阻止表单提交
return;
}
//手动提交表单
document.getElementById("myform").submit();
}
function submitForm2(){
var uname2=document.getElementById("uname2").value;
if(isEmpty(uname2)){//true
//为空 设置提示信息
document.getElementById("msg2").innerHTML="*不能为空";
//阻止表单提交
return false;
}
//手动提交表单
return true;
}
function submitForm3(){
var uname3=document.getElementById("uname3").value;
if(isEmpty(uname3)){//true
//为空 设置提示信息
document.getElementById("msg3").innerHTML="*不能为空";
//阻止表单提交
return false;
}
//手动提交表单
return true;
}
function isEmpty(str){
if(str==null||str.trim()==""){//trim字符串方法 去除空格
return true;
}
return false;
}
</script><!--
获取表单元素
1、获取input元素
1、document.getElementById("id属性值");
通过元素的id属性值获取表单元素对象
2、表单对象.表单元素的name属性值;
通过表单对象中的对应元素的name属性值获取
3、document.getElementsByName("name属性值");
通过表单元素的name属性值获取
4、document.getElementByTagName("标签名/元素名");
通过标签名获取表单元素对象
2、获取单选按钮
注意：相同的一组单选按钮，需要设置相同的name属性值
1、document.getElementsByName("name属性值");
通过表单元素的name属性值获取
2、判断单选按钮是否选中
checked选中状态
在js代码中
checked=true 表示选中
checked=false 表示不选中
在HTML标签中
checked=checked或checked表示选中
不设置checked属性，表示不选中
3、获取单选按钮的值
与单选按钮相同
4、获取下拉选项
1、获取下拉框对象
var 对象=document.getElementById("id属性值");
2、获取下拉框的下拉选项列表
var options=下拉框对象.options;
3、获取下拉框被选中项的索引
var index=下拉框对象.selectedIndex;
4、获取下拉框被选中项的值
var 值=下拉框对象.value;
5、通过选中项的下标获取下拉框被选中项的值
var 值=下拉框对象.options[index].value;
6、获取下拉框被选中项的文本
var 文本值=下拉框对象.options[index].text;
注意：
1、获取下拉框选中项的值（value）
如果option标签设置了value属性值，则获取value属性对应的值
如果option标签未设置value属性值，则获取的是option双标签中的位版本值
2、下拉框的选中状态
选中状态：selected=selected，selected，selected=true
未选中状态，不设置selected属性，selected=false
<form action="myform" method="get"name="myform"id="myform">
姓名:<input type="text" name="uname" id="uname" value="zs" /><br>
密码:<input type="password" name="upwd" id="upwd" value="1234" /><br>
<input type="hidden" name="uno" id="uno" value="隐藏域" />
个人说明:<textarea name="intro"rows="" cols=""></textarea>
<br>
<button type="button"onclick="getTxt();">获取元素内容</button>
<hr >
<br>
<input type="text" name="inputName" id="" value="aaa" />
<input type="radio" name="rad" id="" value="1" class="test" />男
<input type="radio" name="rad" id="" value="2" class="test" />女
<button type="button" onclick="getRadio();">获取单选按钮</button>
<br>
<hr >
<br>
全选/全部选:<input type="checkbox" name="" id="control" value=""onclick="checkAllOrNot()" />
<button type="button" onclick="checkFan()">反选</button>
<br>
<input type="checkbox" name="hobby" id="" value="sing" />唱歌
<input type="checkbox" name="hobby" id="" value="dance" />跳舞
<input type="checkbox" name="hobby" id="" value="rap" />说唱
<button type="button"onclick="getCheckBox()">获取多选按钮</button>
<br>
<hr >
<br>
来自:
<select id="ufrom"name="ufrom">
<option value ="">请选择</option>
<option value ="beijing"selected="selected">北京</option>
<option value ="sahnghai">上海</option>
</select>
<button type="button"onclick="getSelect()">获取下拉选项</button>
</form>
<script type="text/javascript">
function getTxt(){
//1、document.getElementById("id属性值");
var uname=document.getElementById("uname").value;
console.log(uname);
//2、表单对象.表单元素的name属性值;
var pwd=document.getElementById("myform").upwd.value;
console.log(pwd);
//3、document.getElementById("name属性值");
var uno=document.getElementsByName("uno")[0].value;
console.log(uno);
//4、document.getElementByTagName("标签名/元素名");
var intro=document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
/*
获取单选按钮
*/
function getRadio(){
var cla=document.getElementsByName("test");
console.log(cla);
if(cla!=null&&cla.length>0){
//判断input元素的类型
for(var i=0;i<cla.length;i++){
if(cla[i].type=="text"){
console.log("文本框的值："+cla[i].value);
}else if(cla[i].type=="radio"){
console.log("值："+cla[i].value+"是否选中："+cla[i].checked);
}
}
}
}
/*
获取多选按钮
*/
function getCheckBox(){
//通过复选框的name属性值获取
var checkboxs=document.getElementsByName("hobby");
if(checkboxs!=null&&checkboxs.length>0){
//选中复选框的值的字符串
var checkeds='';
//遍历
for(var i=0;i<checkboxs.length;i++){
//获取所有复选框
//console.log("值："+checkboxs[i].value);
//获取被选中的值
/**
if(checkboxs[i].checked){
console.log("选中的值:"+checkboxs[i].value);
}else{
console.log("未选中的值:"+checkboxs[i].value);
}
是否被选中
*/
if(checkboxs[i].checked){
checkeds+=checkboxs[i].value+',';
}
}
}
//截取字符串
if(checkeds!=''){
checkeds=checkeds.substring(0,checkeds.length-1);
}
console.log(checkeds);
}
/*
全选或全不选
*/
function checkAllOrNot(){
//得到控制对象
var control=document.getElementById("control");
//判断是否被选中
var flag=control.checked;
console.log(flag);
//通过复选框的name属性值获取
var checkboxs=document.getElementsByName("hobby");
if(checkboxs!=null&&checkboxs.length>0){
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=flag;
}
}
}
/*
反选
**/
function checkFan(){
var checkboxs=document.getElementsByName("hobby");
if(checkboxs!=null&&checkboxs.length>0){
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=!checkboxs[i].checked;
}
}
}
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].txt;
console.log("被选中项的文本："+txt);
}
</script>PE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
获取表单
1、document.getElementById("id属性值");
2、document.表单的name属性值
3、document.form[下标];
通过指定下标获取表单元素
4、document.forms[表单的name属性值]
通过表单的name属性值获取表单对象
document.forms:获取HTML文档中所有的表单对象
-->
<form id="myform1" name="myform1" action=""> </form>
<form id="myform2" name="myform2" action=""> </form>
<script type="text/javascript">
//1、document.getElementById("id属性值");
console.log(document.getElementById("myform1"));
//2、document.表单的name属性值
console.log(document.("myform2"));
//获取所有的表单对象
console.log(document.forms);
//3、document.form[下标]; 通过指定下标获取表单元素
console.log(document.form[0]);
//4、document.forms[表单的name属性值] 通过表单的name属性值获取表单对象
console.log(document.forms["myform2"]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
Ajax
异步无刷新技术
原生Ajax的实现流程
1、得到XMLHttpRequest();
2、打开请求
xhr.open(method,uri,async);
method:请求方式，通常是GET|POST
uri:请求地址
async:是否异步。如果是true表示异步，否则同步
3、发送请求：
xhr.send(params);
params:请求时需要传递的参数
如果是get请求，设置null（get请求的参数放到url后面）
如果是post请求，无参数设置null，有参数设置参数
4、接收响应
xhr.status 响应状态（200=响应成功，404=资源未找到，500=服务器异常）
xhr.responseText 得到响应结果
-->
<input type="text" name="" id="numb" value="" />
<button type="button"onclick="loadXMLDoc()">获取天气</button>
<p id="text"></p>
</body>
<script type="text/javascript">
function loadXMLDoc(){
document.getElementById("text").innerHTML="请填写城市";
var x,url;
//获取id="numb"的值
x=document.getElementById("numb").value;
console.log(x);
//得到对象
var xhr=new XMLHttpRequest();
url="http://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&language=zh-Hans&unit=c&location="+encodeURI(x)
console.log(url);
//打开请求
xhr.open("get",url,false);//同步
//发送请求
xhr.send(null);
//判断响应状态
if(xhr.status==200){
//获取响应结果
obj=JSON.parse(xhr.responseText);
document.getElementById("text").innerHTML=obj.results[0].location.name+" "+obj.results[0].now.text+" "+obj.results[0].now.temperature;
// document.getElementById("text").innerHTML=xhr.responseText;
// console.log(xhr.responseText);
}else{
console.log("状态码："+xhr.status+",原因："+xhr.responseText)
}
}
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
