realNameHidden

How to read and display html form data in servlet

How to read and display html form data in servlet

realNameHidden's photo
realNameHidden
·

3 min read

For Detailed explanation watch the video

Step1 : Create Dynamic Web Project in Eclipse IDE

step 2 : create the home.html inside "src/main/webapp/" Directory Structure :

dir.png

home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
    <div class="card" style="width: 600px; margin: auto; margin-top: 50px">
        <h2 class="bg-danger text-light card-header">Registration form</h2>
        <form class="form" action="register" method="post">
            <table class="table table-hover table-striped">
                <tr>
                    <td>Name</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>DOB</td>
                    <td><input type="date" name="dob"></td>
                </tr>
                <tr>
                    <td>Gender</td>
                    <td><input type="radio" name="gender" value="male">Male
                        <input type="radio" name="gender" value="female">Female</td>
                </tr>
                <tr>
                    <td>Qualification</td>
                    <td><select name="qlfy">
                            <option value="" selected="selected">Select</option>
                            <option value="engg">B.Tech</option>
                            <option value="accountant">B.COM</option>
                            <option value="arts">BA</option>
                            <option value="MBBS">Medico</option>
                    </select></td>
                </tr>
                <tr>
                    <td>Hobbies</td>
                    <td><input type="checkbox" name="hb" value="reading">Reading
                        <input type="checkbox" name="hb" value="watching">Web
                        Series <input type="checkbox" name="hb" value="playing">Cricket
                        <input type="checkbox" name="hb" value="traveller">Travel
                    </td>
                </tr>
                <tr>
                    <td><button type="submit" class="btn btn-outline-success">Submit</button></td>
                    <td><button type="reset" class="btn btn-outline-danger">Reset</button></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

step 3 : add servlet api to classpath if you are using tomcat 9 then you can download jar from below link https://mvnrepository.com/artifact/org.apache.tomcat/tomcat-servlet-api/9.0.55

step4 : create the package com.servlet inside that package create RegisterServlet.java which extends HttpServlet

Directory Structure after creating RegisterServlet

dir1.png

RegisterServlet.java

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        // get PrintWriter
        PrintWriter pw = res.getWriter();
        // set res type
        res.setContentType("text/html");
        // read the form data
        String name = req.getParameter("name");
        String dob = req.getParameter("dob");
        // gender
        String gender = req.getParameter("gender");
        // qlfy
        String qlfy = req.getParameter("qlfy");
        // hobbies
        String[] hobbies = req.getParameterValues("hb");
        List al = Arrays.asList(hobbies);

        // add bootstrap
        pw.println(
                "<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\">\r\n"
                        + "\r\n" + "<!-- jQuery library -->\r\n"
                        + "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\r\n"
                        + "\r\n" + "<!-- Popper JS -->\r\n"
                        + "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js\"></script>\r\n"
                        + "\r\n" + "<!-- Latest compiled JavaScript -->\r\n"
                        + "<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\"></script>");
        // print data
        pw.println("<div style='width:600px;margin:auto;margin-top:50px;'>");
        pw.println("<table class='table table-hover table-striped'>");
        pw.println("<tr>");
        pw.println("<td>Name</td>");
        pw.println("<td>" + name + "</td>");
        pw.println("</tr>");
        pw.println("<tr>");
        pw.println("<td>DOB</td>");
        pw.println("<td>" + dob + "</td>");
        pw.println("</tr>");
        pw.println("<tr>");
        pw.println("<td>Gender</td>");
        pw.println("<td>" + gender + "</td>");
        pw.println("</tr>");
        pw.println("<tr>");
        pw.println("<td>Qualification</td>");
        pw.println("<td>" + qlfy + "</td>");
        pw.println("</tr>");
        pw.println("<tr>");
        pw.println("<td>Hobbies</td>");
        pw.println("<td>" + al + "</td>");
        pw.println("</tr>");
        pw.println("</table>");
        pw.println("</div>");
        // close the stream
        pw.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        doGet(req, res);
    }
}

step 5 : edit web.xml present inside the src/main/webapp/WEB-INF

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>ServletRequest</display-name>
  <welcome-file-list>
    <welcome-file>home.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
</web-app>

step 6 : Run the application on the server

Registration Page will be as follows enter the info and click on submit

Regis.png

after clicking on the submit information will be displayed on the page as below

info.png

Did you find this article valuable?

Support realNameHidden by becoming a sponsor. Any amount is appreciated!

servletJavaprojectsTomcatserver