JSP: using javascript to submit form

Question

(I know the questions is a bit long but I do believe solution is easy, so would really appreciate it if someone can help me have a look)

I am trying to write a school system, where you can enter a student's name, year, grade, on a webpage, and save the student's info to produce a list. I would like it to have two "buttons" on the webpage:

One is "save and next", i.e. if you finished entering one student info, click this, the info get saved and the webpage renew to enter the next student info.

Second is "save and finish", i.e. if this is the final student you want to enter, click this and the last student info get saved, and webpage is redirected to the next page where it shows a list of all student info.

To achieve this, in JSP, I used two HTML forms, and one of them I used javascript to try to submit to servlet, But I must have done something wrong because it does not work properly:

Here are my codes:

InputGrade.jsp:

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

The first form: used input labels for users to enter info, also used input label to create a submit button "save it next":

  <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>

The second form include the "save and finish" button, but use javascript to submit the information: (I think where the problem is)

User still enter student info in the first form, but the javascript function use getElementById function to acquire the info in first form

<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>

And in the Servlet, a list created to add the students the user entered

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

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

if user press "save and next" button, form one is submitted, and servlet do the action of saving student to the list and redirect to the same JSP file i.e. redirect the the same webpage again of entering the next student:(also might be problematic)

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");
}
}
}

If user press "save and finish", i.e. submitting the second form, and servlet again add the final student entered to the list and redirect to the next webpage showing the whole list:

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

This is where it gets problematic: when submitting the first form hitting "save and next" button it works fine, but when submitting the second from hitting "save and finish" button, it returns error.

Therefore I would really appreciate it if some can help me have a look?

What's error did it shows?

Ataur Rahman Munna
– Ataur Rahman Munna

2017-01-10 08:00:53 +00:00
Commented Jan 10, 2017 at 8:00 — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Jan 10, 2017 at 8:00
It shows NullPointerException

Lin Qiao
– Lin Qiao

2017-01-10 08:15:03 +00:00
Commented Jan 10, 2017 at 8:15 — Lin Qiao
– Lin Qiao, Commented Jan 10, 2017 at 8:15
You didn't accept my answer by hitting accept button.

Ataur Rahman Munna
– Ataur Rahman Munna

2017-01-12 12:14:25 +00:00
Commented Jan 12, 2017 at 12:14 — Ataur Rahman Munna
– Ataur Rahman Munna, Commented Jan 12, 2017 at 12:14

Ataur Rahman Munna · Accepted Answer · 2017-01-10 09:10:55Z

There are many reason that's why you can get a NullpointerException.
Rule of Thumbs : If you want to compare a string then first check if it is not null.

According to your requirement I am giving a solution that how can you do that. Suppose your form be like:

<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>

Now when you click save and next button, then it set flagVal 1 and if we click save and exit button then it sets flagVal 2. After setting the flagVal it submits the form. After submitting your from you should check first that what is your flagVal. So in doPost method

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");
}

Hope that helps.

Gurkan Yesilyurt · Accepted Answer · 2017-01-10 09:35:15Z

0

You don't get form1 values. You post form2 values so you get null error.

Try it please:

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();
}

edited Jan 10, 2017 at 9:35

answered Jan 10, 2017 at 9:29

Gurkan Yesilyurt

2,6752 gold badges24 silver badges23 bronze badges

Collectives™ on Stack Overflow

JSP: using javascript to submit form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related