JSP Example 2 – Form Handling

Introduction

This example of JSP shows how JSP pages can interact with data entered using the HTML forms mechanism. This is a very simple that just adds up two integers.

HTML code

Here's the HTML for the front end.

<html>
<head>
<title>
Adding up two numbers - JSP Example 2
</title>
</head>
<body>
<h1>
Adding up two numbers - JSP Example 2
</h1>
<p>
<form method=GET action="getData.jsp">
<p>
<table>
<tr><td>Enter first number<td> <input type=text name="n1">
<tr><td>Enter second number<td> <input type=text name="n2">
<tr><td> <td><input type=submit value="Calculate sum">
</table>
</body>
</html>

If you have done the steps mentioned in A simple guide to get started with JSP. You will be having a directory called “MyFirst” in “424/apache-tomcat-5.5.20/webapps”. Save this html file as “index.html”.

The JSP "backend"

Here is the code of the JSP backend, the file called ex2.jsp and mentioned at the end of the rather long URL in the HTML code in the previous section.

<html>
<head>
<title>
JSP Example 2
</title>
</head>
<body>
<h1>JSP Example 2</h1>
<% 
        String  sn1;
        String  sn2;
        int n1,n2;
        sn1 = request.getParameter("n1");
        sn2 = request.getParameter("n2");
        n1 = Integer.parseInt(sn1);
        n2 = Integer.parseInt(sn2);
        out.println("The numbers were " + sn1 + " and " + sn2);
        out.println("<br>");
        out.println("The sum is " + (n1+n2));
%>
</body> 
</html>
 
Save this file as “getData.jsp” in “424/apache-tomcat-5.5.20/webapps/MyFirst”
 
The webaddress to check this program is http://www.glue.umd.edu:80YX/MyFirst where XY is last two digits of your class account
 

Explanation of the above program:

The meat is in the Java code enclosed within the <% .... %> pseudo-tags.

Some working variables

The first three lines of the Java code

        String  sn1;
        String  sn2;
        int n1,n2;

declare the variables sn1,sn2,n1,n2.

Getting the values entered by the user

In the two lines of Java code

        sn1 = request.getParameter("n1");
        sn2 = request.getParameter("n2");

"n1" and "n2" are the strings associated with the HTML <input> tags. They should not be confused with the Java variables n1 and n2. The getParameter() method of the request class is supplied via one of the http servlet classes imported in the Tomcat generated code. Note that there is a separate method if the HTML forms mechanism "POST" had been used rather than "GET". This complication does not arise when using ASP or PHP. The Java strings sn1 and sn2 are set to the values entered by the browser user.

Converting the values to integer (binary)

In order to perform any caculations on the numbers entered they need to be converted from string to internal binary form. This complication does not arise when using PHP. The conversion is performed by the following Java code.

        n1 = Integer.parseInt(sn1);
        n2 = Integer.parseInt(sn2);

Java programmers will, doubtless, find this quite intuitive, I found it very peculiar. Integer is a standard class and parseInt is one of its methods.

At this stage a "professional" version of this programme should perform checks to ensure that the values of sn1 and sn2 are really numeric strings. If they are not, in Java jargon, parseInt() will throw an exception which should be caught.

The results

The standard Java method out.println() is used in this simple example. It takes a single string as a parameter.

        out.println("The numbers were " + sn1 + " and " + sn2);
        out.println("<br>");
        out.println("The sum is " + (n1+n2));

+ is the Java string concatenation operator. In the third line of code in the extract above the context of "(n1+n2)" forces a cast (in C parlance) of the integer expression to a string.