onchange()、onsubmit()和onreset()

onchange()失去焦点内容改变事件

代码如下：

<form name="change">
<input type="text" name="wenzi" value="零基础学JavaScript">
<select name="menu" οnchange="changecolor()">
<option value="black">黑色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="purple">紫色</option>
</select>
</form>
<script>
function changecolor(){
var e=window.event;
var obj=e.srcElement;
change.wenzi.style.color=obj.value;
}

</script>

--------------------------------------------------------------------------------

<table style="border: 1px solid #000000; text-align:center">
<form name="mesg" method="post" action="">
<tr>
<td colspan="2">用户个人信息</td>
</tr>
<tr>
<td><label>姓名:</label></td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td><label>性别：</label></td>//要使radio变为单选按钮，必须将name设置为一样
<td><label><input type="radio" name="sex" value="男">男</input><input type="radio" name="sex" value="女"/>女</label></td>
</tr>
<tr>
<td><label>出生年月：</label></td>
<td><select name="nian">
<option>1990年</option>
<option>1991年</option>
<option>1992年</option>
<option>1993年</option>
<option>1994年</option>
<option>1995年</option>
</select>
<select name="yue" οnchange="queren()">
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
</td>
</tr>
</form>
</table>
<script>
function queren(){
         //radio单选框单选时要将name设置为一样
alert("姓名："+mesg.name.value+"\n性别："+mesg.sex.value+"\n出生年月："+mesg.nian.value+mesg.yue.value);
}

</script>

------------------------------------------------------------------------------------

<table>
<form name="tongji">
<tr><td colspan="2">商品销售统计</td></tr>
<tr><td>统计类型：</td><td>
<select name="leixing" οnchange="huan()">
<option  name="xuanxiang" >按月统计</option>
<option  name="xuanxiang" >按年统计</option>
</select>
</td></tr>
<td id="nianfen">统计月份：</td><td>
<input type="checkbox" class="bianliang " name="month" value="5月"/><span class="xianshi">5月</span>
<input type="checkbox" class="bianliang " name="month" value="6月" checked="checked"/><span class="xianshi">6月</span>
</td>
<tr><td colspan="2"><input type="button" value="销售统计"/><input type="reset" value="重置内容"/></td></tr>
</form>
<script>
function huan(){
//var xuanxiang=document.getElementsByClassName("xuanxiang");
var xuanxiang=tongji.leixing.value;
if(xuanxiang=="按年统计"){
var nianfen=document.getElementById("nianfen");
nianfen.innerHTML="统计年份:";
var bianliang=document.getElementsByClassName("bianliang");
bianliang[0].setAttribute("type","radio");//使用setAttribue跟使用innerHTML一样，必须指定唯一的元素
bianliang[1].setAttribute("type","radio");
bianliang[0].setAttribute("value","2016年");
bianliang[1].setAttribute("value","2017年");
bianliang[0].setAttribute("checked","checked");
var xianshi=document.getElementsByClassName("xianshi");
xianshi[0].innerHTML="2016年";
xianshi[1].innerHTML="2017年";}
else{
var nianfen=document.getElementById("nianfen");
nianfen.innerHTML="统计月份:";
var bianliang=document.getElementsByClassName("bianliang");
bianliang[0].setAttribute("type","checkbox");//使用setAttribue跟使用innerHTML一样，必须指定唯一的元素
bianliang[1].setAttribute("type","checkbox");
bianliang[0].setAttribute("value","5月");
bianliang[1].setAttribute("value","6月");
bianliang[1].setAttribute("checked","checked");//?如何利用setAttribue去除复选框
var xianshi=document.getElementsByClassName("xianshi");
xianshi[0].innerHTML="5月";
xianshi[1].innerHTML="6月";
}
}
</script>

</table>

/* 如何去除checkbox的选中状态？？？？记得补坑*/

表单提交与重置事件

<form name="formname" οnsubmit="return Funname" οnreset="return Funname"></form>

如果onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return语句，

否则，不论在函数中返回的是true，还是false，当前事件的返回值都一律是true值。

代码如下：

--------------------------------------------------------------------------------------------------------------------

<ul>
<form name="home"method="post"action="" οnreset="return chongzhi()" οnsubmit="tijiao()">
<li><label>地&nbsp;段</label><select name="qu">
<option>朝阳区</option>
<option>贾汪区</option>
</select></li>
<li><label>房源类型</label><select name="leixing">
<option>高层</option>
<option>中层</option>
<option>底层</option>
</select></li>
<li><label>房源户型</label><select name="huxing">
<option>三室一厅</option>
<option>两室一厅</option>
</select></li>
<li><label>小区名称</label><input name="xiaoqu" type="text"/></li>
<li><input type="submit"/><input type="reset"/></li>
</form>
</ul>
<script>
function chongzhi(){
alert("您确定要重新输入吗？");
}
function tijiao(){
alert("地段："+home.qu.value+"\n房源类型："+home.leixing.value+"\n房源户型:"+home.huxing.value+"\n小区名称："+home.xiaoqu.value);
}

</script>