自己动手-表单2

最新推荐文章于 2024-06-18 15:12:48 发布

原创最新推荐文章于 2024-06-18 15:12:48 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #JavaScript #XHTML #HTML #ViewUI

Javacript 专栏收录该内容

24 篇文章

订阅专栏

本文档介绍了一个使用JavaScript阻止默认表单提交行为并进行条件判断的实例。当输入特定用户名时，表单将直接提交；否则，将阻止提交动作。此案例展示了如何通过JavaScript控制HTML表单的行为。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	<script type="text/javascript">
	window.onload=function(){
		var btnTest=document.getElementById("btnTest");
		btnTest.onclick=function(e){
			var username=document.getElementById("username");
			if(username.value=="macrotea"){
				var loginForm=document.getElementById("loginForm");
				loginForm.submit();
			}else{
				//方式1：
/*				if(e){
					e.preventDefault();//标准方式		
				}else{
					event.returnValue=false;//IE方式
				}*/
				//方式2：
				return false;
			}	

		}
	}
	</script>
	<style type="text/csss">
		
	</style>
	</head>

	<body>
    <form id="loginForm" name="loginForm" method="post" action="http://macrotea.iteye.com">
        <p>用户名: <br />
            <input name="username" type="text" id="username" value="macrotea1" />
            <br />
            <input type="button" name="btnTest" id="btnTest" value="测试"/>
        </p>
    </form>
</body>
</html>