Spring Web MVC – Spring Form Submission | Spring Boot

Web Form Submission is regular task when developing a Web page. In the tutorial, JavaSampleApproach will introduce you how to use Spring Form Submission when building a Spring MVC Web page.

Related Posts:
1. How to integrate Http Angularjs & Spring Boot
2. How to integrate JQuery Ajax POST/GET & Spring Boot

I. Technology for Spring Form Submission tutorial

– Java 1.8
– Maven: 3.3.9
– Editor: Spring Tool Suite – Version 3.7.3.RELEASE
– Spring Boot: Version: 3.8.0.RELEASE

II. Overview

1. Project Structure

Spring Form Submission - Project Structure

2. Step to do

– Create Spring Boot project
– Create a Customer model
– Create a simple Web Controller.
– Create a html views.
– Run & Check result

III. Practices

1. Create a Spring Boot project

Open Spring Tool Suite, choose File -> New -> Spring Starter Project, input project’s info. Press Next button, then add needed dependencies:
– For Thymeleaf, choose Template Engines, select Thymeleaf
– For Spring Web MVC, choose Web, then select Web.

Press Finish, Spring Boot project will be created successfully.
Check pom.xml file for dependencies:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. Create Customer model


package com.javasampleapproach.formsubmission.model;

public class Customer {
	 
    private long id;
    private String firstname;
    private String lastname;
     
 
    public long getId() {
        return id;
    }
 
    public void setId(long id) {
        this.id = id;
    }
 
    public String getFirstname() {
        return firstname;
    }
 
    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }
 
    public String getLastname() {
        return lastname;
    }
 
    public void setLastname(String lastname) {
        this.lastname = lastname;
    }
 
}

3. Create a Simple Web Controller.

Create SimpleWebController with 2 RequestMappings:
– @RequestMapping(value=”/form”, method=RequestMethod.GET): return a html view: form

– @RequestMapping(value=”/form”, method=RequestMethod.POST): to submit customer form, then a html view: “result “


package com.javasampleapproach.formsubmission.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.javasampleapproach.formsubmission.model.Customer;
 
 
@Controller
public class SimpleWebController {
 
    Logger log = LoggerFactory.getLogger(this.getClass());
     
    @RequestMapping(value="/form", method=RequestMethod.GET)
    public String customerForm(Model model) {
        model.addAttribute("customer", new Customer());
        return "form";
    }
 
    @RequestMapping(value="/form", method=RequestMethod.POST)
    public String customerSubmit(@ModelAttribute Customer customer, Model model) {
         
        model.addAttribute("customer", customer);
        String info = String.format("Customer Submission: id = %d, firstname = %s, lastname = %s", 
                                        customer.getId(), customer.getFirstname(), customer.getLastname());
        log.info(info);
         
        return "result";
    }
 
}

4. Create html views.

– Create 2 html views: “result” & “form”
Place them at: /src/main/resources/template

form.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<h1>Customer Form</h1>
    <form action="#" th:action="@{/form}" th:object="${customer}" method="post">
    	<p>Id: <input type="text" th:field="*{id}" /></p>
        <p>First Name: <input type="text" th:field="*{firstname}" /></p>
        <p>Last Name: <input type="text" th:field="*{lastname}" /></p>
        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
</body>
</html>

result.html:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1>Result</h1>
    <p th:text="'id: ' + ${customer.id}" />
    <p th:text="'First Name: ' + ${customer.firstname}" />
    <p th:text="'Last Name: ' + ${customer.lastname}" />
    <a href="/form">Submit another Customer Form</a>
</body>
</html>

5. Run & Check result

– Maven build:
clean install

– Run project as Mode: Spring Boot App.
– Make a request:
http://localhost:8080/form

Then input: id, firstname, lastname.

Press Submit button then result:

spring form submission

IV. Source code

SpringMVCFormSubmission



By grokonez | August 21, 2016.

Last updated on May 4, 2021.



Related Posts


6 thoughts on “Spring Web MVC – Spring Form Submission | Spring Boot”

  1. I imported this code to my sts and I am getting javax.servlet.ServletException: Circular view path [form]: would dispatch back to the current handler URL [/form] again. Check your ViewResolver setup! (Hint: This may be the result of an unspecified view, due to default view name generation.) error

    1. Hello Mazaharul Haque,

      We had checked sourcecode and everything works well!(Also works well with 1.5.7.RELEASE SpringBoot version)

      -> Logs:

      2017-11-25 21:15:00.586  INFO 16212 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring FrameworkServlet 'dispatcherServlet'
      2017-11-25 21:15:00.586  INFO 16212 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization started
      2017-11-25 21:15:00.611  INFO 16212 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization completed in 25 ms
      2017-11-25 21:15:20.482  INFO 16212 --- [nio-8080-exec-3] c.j.f.controller.SimpleWebController     : Customer Submission: id = 10, firstname = Jack, lastname = Davis
      

      How about your problems now?

      Regards,
      JSA

  2. Hello! You can use our professional web design services to improve your online business and website conversions. 8+ years of successful work, reasonable pricing. Please, confirm the request to find out more.

Got Something To Say:

Your email address will not be published. Required fields are marked *

*