JSP：使用javascript提交表单答案

【问题标题】：JSP: using javascript to submit formJSP：使用javascript提交表单
【发布时间】：2017-01-10 07:56:33
【问题描述】：

（我知道问题有点长，但我相信解决方案很简单，所以如果有人能帮我看看，我将不胜感激）

我正在尝试编写一个学校系统，您可以在其中在网页上输入学生的姓名、年份、年级，并保存学生的信息以生成列表。我希望它在网页上有两个“按钮”：

一个是“保存并下一个”，即如果您输入完一个学生信息，请单击此，该信息被保存并且网页更新以输入下一个学生信息。

第二个是“保存并完成”，即如果这是您要输入的最后一个学生，请单击此按钮并保存最后一个学生信息，网页将重定向到显示所有学生信息列表的下一页.

为了实现这一点，在 JSP 中，我使用了两个 HTML 表单，其中一个我使用 javascript 尝试提交给 servlet，但我一定做错了什么，因为它不能正常工作：

这是我的代码：

InputGrade.jsp：

<html>
  <head>
  <title>Title</title>
  </head>
  <body>

第一种形式：使用输入标签供用户输入信息，也使用输入标签创建提交按钮“下一步保存”：

  <form action = "InputGradeServlet" method="POST">
    <table>
    <tr>
        <td>
            Enter Student Name: <input type="text" id="stName" name =     "stName" />
        </td>
        <td>
            Enter Subject: <input type="text" id="Subject" name = "Subject" />
        </td>
        <td>
        Enter Grade: <input type = "text" id="Grade" name = "Grade" />
        </td>
        <td>
            <input type="submit" value="save and next"/>
        </td>
     </tr>
     </table>
    <input type="text"  name = "flag"  style="display: none" value="1"/>
 </form>

第二种形式包含“保存并完成”按钮，但是使用javascript提交信息：（我认为问题出在哪里）

用户仍然以第一种形式输入学生信息，但javascript函数使用getElementById函数获取第一种形式的信息

<form name="form2" action ="InputGradeServlet" method="POST" >
<input type="text"  name = "flag"  style="display: none" value="2"/>
<button onclick="finSaveFunc()">Finish and submit</button>

<script>

function finSaveFunc() {

    var stName = document.getElementById("stName")
    var Subject = document.getElementById("Subject")
    var Grade = document.getElementById("Grade")

    document.stName.submit();
    document.Subject.submit();
    document.Grade.submit();

}

</script>

在 Servlet 中，创建了一个列表来添加用户输入的学生

public class InputGradeServlet extends HttpServlet {
List<Student> inputStList = new <Student>ArrayList();

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

如果用户按下“保存并下一步”按钮，则表单一被提交，并且 servlet 执行将学生保存到列表并重定向到相同 JSP 文件的操作，即再次重定向相同网页以输入下一个学生：（也可能有问题）

if (request.getParameter("flag").equals("1")) {
      request.getParameter("Grade");
      ...... (get other info: name, year ect)
      inputStList.add(findstudent); //add student entered to the list
      response.sendRedirect("InputGrade.jsp");
}
}
}

如果用户按“保存并完成”，即提交第二个表单，则 servlet 再次将最后输入的学生添加到列表中并重定向到显示整个列表的下一个网页：

}else if (request.getParameter("flag").equals("2")) {
request.getParameter("Grade");
....
inputStList.add(findstudent);
request.getSession().setAttribute("inputStList",inputStList);
response.sendRedirect("ShowList.jsp"); }

这是有问题的地方：当提交第一个表单时点击“保存并下一步”按钮它工作正常，但当提交第二个表单点击“保存并完成”按钮时，它返回错误。

因此，如果有人可以帮助我看看，我将不胜感激？

【问题讨论】：

它显示了什么错误？
它显示 NullPointerException
你没有通过点击接受按钮接受我的回答。

标签： javascript html forms jsp onclick

【解决方案1】：

您可以获得NullpointerException的原因有很多。
Rule of Thumbs：If you want to compare a string then first check if it is not null.

根据您的要求，我提供了一个解决方案，您可以如何做到这一点。假设你的表格是这样的：

<html>
    <head>

    <script>
        function _submit(flagVal) {
            document.getElementById('flagValId').value=flagVal;
            document.getElementById('someFormId').submit();
        }
    </script>
    </head>

    <body>
        <form action = "InputGradeServlet" method="POST" id="someFormId">
            <table>
            <tr>
                <td>
                    Enter Student Name: <input type="text" id="stName" name ="stName" />
                </td>
                <td>
                    Enter Subject: <input type="text" id="Subject" name = "Subject" />
                </td>
                <td>
                Enter Grade: <input type = "text" id="Grade" name = "Grade" />
                </td>
                <td>
                    <input type="button" value="save and next" onclick="_submit('1')"/>
                    <input type="button" value="save and exit" onclick="_submit('2')"/>
                </td>
             </tr>
             </table>
            <input type="hidden" id="flagValId"  name = "flag"  value=""/>
         </form>
    </body>
</html>

现在当你点击 save and next 按钮时，它会设置flagVal 1，如果我们点击 save and exit 按钮，它会设置flagVal 2。设置flagVal 它提交表单。提交您的邮件后，您应该首先检查您的flagVal 是什么。所以在doPost方法中

if (request.getParameter("flag")!=null && request.getParameter("flag").equals("1")) {
    //Add your student in this block and show the input page again.
    response.sendRedirect("InputGrade.jsp");
}else  if (request.getParameter("flag")!=null && request.getParameter("flag").equals("2")) {
        //Add your student in this block and show the list.
        response.sendRedirect("ShowList.jsp");
}

希望对您有所帮助。

【讨论】：

【解决方案2】：

您没有得到 form1 值。你发布了 form2 值，所以你得到了 null 错误。

请尝试一下：

function finSaveFunc() {
  var stName = document.getElementById("stName")
  var Subject = document.getElementById("Subject")
  var Grade = document.getElementById("Grade")
  var newForm = document
    .getElementById("form2")
    .appendChild(stName)
    .appendChild(Subject)
    .appendChild(Grade);
  newForm.submit();
}

【讨论】：