今天做一个功能,页面提交数据到后台。做的多了功能很熟,写代码基本从做过的地方拷拷过来用。今天也很随意的从别处拷代码过来。很快功能完成了。测试下来,一点提交按钮页面刷新一下输入框填的数据全清空了。废话不多说。上代码分析问题。
有四个按钮,都可以做点击后提交动作。
我们先来做测试。
在T1输入框中随意输入如:x,然后点击各按钮
[b]
所有按钮放在form内
1 发现点击按钮1和按钮2时,弹出提示框后页面刷新,T1输入框的值被清空。
我们把按钮1和按钮2放到form外面,再次执行如上操作
2 发现所有按钮,弹出提示框后页面,没有刷新,T1输入框的值没有被清空。[/b]
注:按钮3和按钮4放在form里面和里面,效果属于第2种结果
以上在chrome和firxfox中测试过。欢迎大家验证。
[b]总结:写提交动作时,按钮尽量用a或input[type='button'][/b]
<!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>Button测试</title>
<script type="text/javascript" src="http://global.z7zba.com/js/jquery-1.9.1.min.js"></script>
</head>
<body>
<form>
T1<input type="text" id="t1" name="t1" value="" />
T2<input type="text" id="t2" name="t2" value="" />
<br />
<input type="submit" onclick="doAction();" value="按钮1(type=submit)" />
<button onclick="doAction();">按钮2(button)</button>
<input type="button" onclick="doAction();" value="按钮3(type=button)" />
<a href="javascript:doAction();">按钮4(a)</a>
</form>
<div style="border-bottom:#000;">----form外----</div>
<script type="text/javascript">
function doAction()
{
if($('#t2').val() == '') { alert('T2为空'); return; }
}
</script>
</body>
</html>
有四个按钮,都可以做点击后提交动作。
我们先来做测试。
在T1输入框中随意输入如:x,然后点击各按钮
[b]
所有按钮放在form内
1 发现点击按钮1和按钮2时,弹出提示框后页面刷新,T1输入框的值被清空。
我们把按钮1和按钮2放到form外面,再次执行如上操作
2 发现所有按钮,弹出提示框后页面,没有刷新,T1输入框的值没有被清空。[/b]
注:按钮3和按钮4放在form里面和里面,效果属于第2种结果
以上在chrome和firxfox中测试过。欢迎大家验证。
[b]总结:写提交动作时,按钮尽量用a或input[type='button'][/b]