0
私はリセットボタンを持つフォームを持っています.Javaサーブレットにフォームを送信してからJSPページに戻るとJavascriptのリセット機能は動作しません。Java Servlet経由で転送された後にフォームリセットの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>
サーブレット：
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()作品を開いているが、送信ボタンがクリックされた場合とサーブレットはフォームを処理してフォームを自身に戻しますが、resetForm() javascript関数はフォームフィールドをリセットできません。
resetForm()関数は、サーブレットによって転送されたとしても、フォームフィールドをリセットするにはどうすればよいですか？
問題は解決しないかもしれませんが、クローズドボディタグの前にスクリプトタグを移動することをお勧めします（とにかくdomレンダリングをブロックしたくない場合）。そして、デバッグのためにあなたのコンソールを開いたことがありますか？ – Xlee
デバッガでエラーが表示されませんでした。 – thotheolh
"フォームリセット"は、フォームデータを初期値にリセットします。この場合、値を転送した後は初期値になります。リセットボタンをクリックすると動作しますが、表示することはできません。あなたの初期値は空ではないからです。 document.getElementById（ 'firstname'）を使用できます。value = "";一つずつ。 –