form_field2.html

《JavaScript网页开发体验式学习教程》的源代码

<!--form method=post target="_blank">
用户名：<input type=text name=user onkeydown="toNext(this.form)"><br>
密码：<input type=password name=pass ><br>
<input type=submit name=submit1 value=递交>
</form>
<script language=javascript>
	function toNext(frm)
	{
		if(window.event.keyCode == 13)//回车键的Unicode码为13
		{
			/*frm.pass.focus();
			window.event.returnValue = false;*/
			window.event.keyCode = 9;
		}	
	}
</script>
<form method=post>
数字：<input type=text name=num onkeypress="checkNum(this.form)"><br>
</form>
<script language=javascript>
	function checkNum(frm)
	{
		if(window.event.keyCode > '9'.charCodeAt(0) || 
			window.event.keyCode < '0'.charCodeAt(0))
		{
			/*用下面两条语句中的任何一条，都可以实现取消这次输入的字符值*/
			//window.event.keyCode = 0;
			window.event.returnValue = false;
		}
			
	}
</script-->
<!--script language=javascript>
	function CheckSum()
	{
		var sum = 0;
		for(var i=0; i< document.form1.elements["writer"].length; i++ )
		{
			if(document.form1.elements["writer"][i].checked)
			{
				sum = sum + parseInt(document.form1.elements["writer"][i].value);
			}		
		}
		totalprice.innerText = sum + "元";
	}
</script >
<FORM action="" method=post name=form1>
<INPUT type="checkbox" name=writer value="10" onclick="CheckSum()">橡皮擦(10元)<br>
<INPUT type="checkbox" name=writer value="20" onclick="CheckSum()">铅笔(20元)<br>
<INPUT type="checkbox" name=writer value="30" onclick="CheckSum()">圆珠笔(30元)<br>
<INPUT type="checkbox" name=writer value="40" onclick="CheckSum()">签字笔(40元)<br>
<INPUT type="checkbox" name=writer value="50" onclick="CheckSum()">钢笔(50元)<br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1><br>
总价为：<span id="totalprice">0元</span> 
</FORM-->
<SELECT ID="oCourses" SIZE="1" onchange="fnChange()">
<OPTION VALUE="" SELECTED>--请选择一个--</option>
</SELECT>
<TEXTAREA ID="oData"></TEXTAREA>
<script language=javascript>	
	//假设从数据库中查询到的用户上次选择结果项的值为"3"
	var last_select = "3"; 

	//下面的代码为列表框增加三个选择项
	var oOption = document.createElement("OPTION");
	oOption.text = "vc";
	oOption.value = "1";
	oCourses.add(oOption);

	oOption = document.createElement("OPTION");
	oOption.text = "vb";
	oOption.value = "2";
	oCourses.add(oOption);

	oOption = document.createElement("OPTION");
	oOption.text = "java";
	oOption.value = "3";
	oCourses.add(oOption);
	/*用户在修改和查看上次的设置信息时，程序应自动选中他上次的设置结果项，下面的一条简单语句就可以实现这个功能。*/
	oCourses.value = last_select;
	/*下面的fnChange函数在用户每次改变选择时都将选择结果显示在一个文本框中*/
	function fnChange()
	{
		oData.value = oCourses.options[oCourses.selectedIndex].value;
	}
</script>