gpt4 book ai didi

通过 Java Servlet 转发后,表单重置的 Javascript 不起作用

转载 作者:行者123 更新时间:2023-12-03 05:13:16 26 4
gpt4 key购买 nike

我有一个带有重置按钮的表单,每当我将表单(它是一个 JSP 页面)提交到 Java servlet 进行处理然后返回到 JSP 页面时,Javascript 重置功能不起作用。

重置函数所做的不仅是重置表单,还重置表单中文本区域的字符计数器。下面是代码片段

JSP页面:

<html>
<head>
<script>
var len;
var maxLen = 400;

function countChar(val) {
len = val.value.length;
if (len >= maxLen) {
val.value = val.value.substring(0, maxLen);
} else {
document.getElementById('charNum').innerHTML = "Characters remaining: " + (maxLen - len);
}
}
;

function resetForm() {
len = 0;
document.getElementById('theForm').reset();
document.getElementById('charNum').innerHTML = "Characters remaining: " + (maxLen - len);
}
;
</script>
</head>
<body>
<div>
<table width="100%">
<tr>
<td></td>
<td align="center">
<form id="theForm" action="SomeForm" method="POST">
<table class="contactform" bgcolor="#afd977">
<tr>
<td></td>
</tr>
<tr>
<td>First Name: </td>
<td>
<%

if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"firstname\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("firstname") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"firstname\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td>Last Name: </td>
<td>
<%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"lastname\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("lastname") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"lastname\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.println("<input type=\"text\" name=\"email\" style=\"display:table-cell; width:100%\" value=\"" + request.getParameter("email") + "\">");
}
} else {
out.println("<input type=\"text\" name=\"email\" style=\"display:table-cell; width:100%\">");
}
%>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Message: </td>
<td>
<textarea name="msg" rows="10" cols="50" onkeyup="countChar(this)"><%
if (request.getAttribute("result-status") != null) {
if (request.getAttribute("result-status").equals("fail")) {
out.print(request.getParameter("msg"));
}
}
%></textarea>
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="button" value="Reset" style="display:table-cell; width:50%;" onclick="resetForm()"><input type="submit" value="Submit" style="display:table-cell; width:50%;"><div id="charNum" style="font-size: 15px; padding-top: 10px;">Characters remaining: 400</div>
</td>
</tr>
</table>
</form>
</td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

Servlet:

public class SomeServlet extends HttpServlet {

private String firstname = null;
private String lastname = null;
private String email = null;
private String msg = null;
private String redirectUrl = "webpage.jsp";

/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException, MessagingException {
// Receive form information
firstname = (String) request.getParameter("firstname");
lastname = (String) request.getParameter("lastname");
email = (String) request.getParameter("email");
msg = (String) request.getParameter("msg");

// Do something
...

// Forward back to
request.getRequestDispatcher(redirectUrl).forward(request, response);
}

/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}

/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>

}

webpage.jsp 首次在浏览器上打开时,resetForm() 工作得很好,但是当单击提交按钮并且 servlet 处理表单并转发时表单返回到自身,resetForm() javascript 函数无法重置表单字段。

如何让 resetForm() 函数重置表单字段,即使它已由 servlet 转发给自身?

最佳答案

"Form reset" resets the form-data to its initial values.

在这种情况下,转发您的值后,它们将是初始值。如果你点击重置按钮,它可以工作,但你不能显示。因为你的初始值不为空。

<小时/>

您可以使用 document.getElementById('firstname').value="";一一。

关于通过 Java Servlet 转发后,表单重置的 Javascript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41713506/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com