jsp中执行onclick会刷新一次页面的问题
程序员文章站
2022-05-10 17:40:10
...
今天做一个注册页面的时候,弄了一个清空的按钮,我执行清空按钮,但是按钮调用的方法 什么都没写,所有文本都清空了
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我要注册</title> <script type="text/javascript"> function resetClick() { } </script> </head> <body style="text-align: center;"> <form action="zhuche" method="post"> <table width="40%" border="1"> <tr> <td>用户名</td> <td> <input type="text" name="userName" id ="userName"> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="userPwd" id="userPwd"> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="confirmPwd" id="confirmPwd"> </td> </tr> <tr> <td> <!-- 执行重置 --> <input type="reset" value="清空" onclick="resetClick()"> </td> <td> <input type="submit" value="注册"> </td> </tr> </table> </form> </body> </html>
查了一下资料,原因是在 <form action="zhuche" method="post"> 执行onclick,所以每次页面都会刷新一次。
有两种方法,不用刷新页面
1、不用 <form action> 格式,删掉这个格式
2、改成 onclick="return resetClick()" ,其中resetClick()为onclick方法,并且在方法中 return = false; 这样就不用刷新页面了
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>我要注册</title> <script type="text/javascript"> function resetClick() { document.getElementById("userName").value = ""; document.getElementById("userPwd").value = ""; document.getElementById("confirmPwd").value = ""; return false; } </script> </head> <body style="text-align: center;"> <form action="zhuche" method="post"> <table width="40%" border="1"> <tr> <td>用户名</td> <td> <input type="text" name="userName" id ="userName"> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="userPwd" id="userPwd"> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="confirmPwd" id="confirmPwd"> </td> </tr> <tr> <td> <!-- 执行重置 --> <input type="reset" value="清空" onclick="return resetClick()"> </td> <td> <input type="submit" value="注册"> </td> </tr> </table> </form> </body> </html>
更多相关教程请访问 JavaScript视频教程