❮ Jstl Function Substringbefore Jsp Expression Language ❯

JSP `Form Handling`

When browsing web pages, we often need to submit information to the server and have backend programs process it. Browsers use GET and POST methods to submit data to the server.

GET Method

The GET method appends the encoded request information to the URL, separated by a "?" from the base URL. For example:

http://www.tutorialpro.org/hello?key1=value1&key2=value2

GET is the default method browsers use to transmit parameters, but sensitive information like passwords is not recommended to be sent via GET.

There is a limit to the size of data transmitted using GET (note that it's not the number of parameters that is limited), with a maximum of 1024 bytes.

POST Method

Sensitive information, such as passwords, can be transmitted using the POST method, which is implicit.

POST data is invisible, unlike GET, which is transmitted via the URL (you can see it in your browser's address bar).

JSP uses getParameter() to retrieve transmitted parameters and getInputStream() to handle binary data streams from the client.

Reading Form Data in JSP

getParameter(): Use request.getParameter() to retrieve the value of form parameters.

getParameterValues(): Retrieve data for checkboxes (with the same name but multiple values). Accepts array variables, like those for checkboxes.

getParameterNames(): This method retrieves all variable names and returns an Enumeration.

getInputStream(): Call this method to read binary data streams from the client.

Example of GET Method Using URL

Here is a simple URL using the GET method to pass parameters:

http://localhost:8080/testjsp/main.jsp?name=tutorialpro.org&url=http://ww.tutorialpro.org

testjsp is the project address.

Below is the JSP program in the main.jsp file for processing form data submitted by the client, using the getParameter() method to retrieve the data:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>
<h1>Reading Data with GET Method</h1>
<ul>
<li><p><b>Site Name:</b>
   <%= request.getParameter("name")%>
</p></li>
<li><p><b>URL:</b>
   <%= request.getParameter("url")%>
</p></li>
</ul>
</body>
</html>

Next, access the URL in your browser, and the output will be as follows:

Example of GET Method Using Form

Below is a simple HTML form that submits client data to the main.jsp file using the GET method:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>

<form action="main.jsp" method="GET">
Site Name: <input type="text" name="name">
<br />
URL: <input type="text" name="url" />
<input type="submit" value="Submit" />
</form>

</body>
</html>

Save the above HTML code to a file named test.htm. Place this file in the WebContent directory of your current JSP project (same directory as main.jsp).

Access the URL to submit form data to the main.jsp file, and the demonstration GIF will be as follows:

Enter information in the "Site Name" and "URL" fields and click the "Submit" button to see the output.

Example of POST Method Using Form

Next, let's use the POST method to transmit form data by modifying the main.jsp and Hello.htm files as shown below:

main.jsp file code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>
<h1>Reading Data with POST Method</h1>
<ul>
<li><p><b>Site Name:</b>
   <%= request.getParameter("name")%>
</p></li>
<li><p><b>URL:</b>
   <%= request.getParameter("url")%>
</p></li>
</ul>
</body>
</html>

And the Hello.htm file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>

<form action="main.jsp" method="POST">
Site Name: <input type="text" name="name">
<br />
URL: <input type="text" name="url" />
<input type="submit" value="Submit" />
</form>

</body>
</html>

Save the modified files and access the form in your browser to see the results.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>
<h1>Reading Data with POST Method</h1>
<ul>
<li><p><b>Site Name:</b>
<%
// Solve the problem of Chinese乱码
String name = new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8");
%>
   <%=name%>
</p></li>
<li><p><b>URL:</b>
   <%= request.getParameter("url")%>
</p></li>
</ul>
</body>
</html>

In the code, we use new String((request.getParameter("name")).getBytes("ISO-8859-1"),"UTF-8") to convert the encoding to prevent Chinese乱码.

Here is the modified code for test.htm:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>

<form action="main.jsp" method="POST">
Site Name: <input type="text" name="name">
<br />
URL: <input type="text" name="url" />
<input type="submit" value="Submit" />
</form>

</body>
</html>

By accessing ** and submitting the form data to the main.jsp file, the demonstration GIF is shown as follows:

Passing Checkbox Data to JSP Program

A checkbox can pass one or multiple data.

Here is a simple HTML code, saved in the test.htm file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>

<form action="main.jsp" method="POST" target="_blank">
<input type="checkbox" name="google" checked="checked" /> Google
<input type="checkbox" name="tutorialpro"  /> tutorialpro.org
<input type="checkbox" name="taobao" checked="checked" /> Taobao
<input type="submit" value="Select Websites" />
</form>

</body>
</html>

The above code looks like this when accessed in the browser:

The following is the main.jsp file code for processing checkbox data:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>
<h1>Reading Data from Checkboxes</h1>
<ul>
<li><p><b>Google Checked:</b>
   <%= request.getParameter("google")%>
</p></li>
<li><p><b>tutorialpro.org Checked:</b>
   <%= request.getParameter("tutorialpro")%>
</p></li>
<li><p><b>Taobao Checked:</b>
   <%= request.getParameter("taobao")%>
</p></li>
</ul>
</body>
</html>

By accessing ** and submitting form data to the main.jsp file, the demonstration GIF is shown below:

Reading All Form Parameters

Below, we will use HttpServletRequest's getParameterNames() to read all form parameters. This method retrieves all variable names and returns an enumeration.

Once we have an Enumeration, we can call the hasMoreElements() method to determine if there are more elements and use the nextElement() method to get each parameter's name.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>
<h1>Reading All Form Parameters</h1>
<table width="100%" border="1" align="center">
<tr bgcolor="#949494">
<th>Parameter Name</th><th>Parameter Value</th>
</tr>
<%
   Enumeration paramNames = request.getParameterNames();

   while(paramNames.hasMoreElements()) {
      String paramName = (String)paramNames.nextElement();
      out.print("<tr><td>" + paramName + "</td>\n");
      String paramValue = request.getParameter(paramName);
      out.println("<td> " + paramValue + "</td></tr>\n");
   }
%>
</table>
</body>
</html>

Below is the content of the test.htm file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
</head>
<body>

<form action="main.jsp" method="POST" target="_blank">
<input type="checkbox" name="google" checked="checked" /> Google
<input type="checkbox" name="tutorialpro"  /> tutorialpro.org
<input type="checkbox" name="taobao" checked="checked" /> 
                                                淘宝
<input type="submit" value="Select Website" />
</form>

</body>
</html>

Now, by accessing the test.htm file through a browser and submitting the data, the output is as follows: