CODEWITHSUNDEEP
javaspring-bootthymeleaf
cidalia
cidalia

Reputation: 13

Thymeleaf: cannot handling input form Spring Boot

I am new in web app development and I want to create a login page for my web app (using Spring boot + Thymeleaf), but I cannot display the form.html when I make a request for /form.

This is my Entity class:

 package com.example.springboot.model;

    public class ApplicationUser {
    private String username;
    private String password;

    public ApplicationUser(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public ApplicationUser() { }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

My form.html looks like this:

 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Form Submission</title>
</head>
<body>
    <h1>User form</h1>
    <form action="#" th:action="@{/form}" th:object="${applicationuser}" method="post">
        <p>Username: <input type="text" th:field="*{username}"/></p>
        <p>Password: <input type="text" th:field="*{password}"/></p>
        <p><input type="submit" value="Send"/></p>
    </form>
</body>
</html>

And the result.html is 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Result</title>
</head>
<body>
    <h1>Result</h1>
    <p th:text="'username: ' + ${applicationuser.username}"/>
    <p th:text="'password: ' + ${applicationuser.password}"/>
    <a href="/form">Submit another</a>
</body>
</html>

But applicationuser from th:object="${applicationuser}" is highlighted in red ("cannot resolve "applicationuser"). Can this be a problem? How to resolve it?

My Controller class is

 @RestController
public class Test {

    @RequestMapping(value = "/form",method = RequestMethod.GET)
    public String userForm(Model model){
        model.addAttribute("applicationuser",new ApplicationUser());
        return "form";
    }

    @RequestMapping(value = "/form",method = RequestMethod.POST)
    public String userSubmit(@ModelAttribute ApplicationUser user,Model model){
        model.addAttribute("applicationuser",user);
        String info = String.format("User Submission: username = %s, password = %s", user.getUsername(),user.getPassword());
        System.out.println(info);
        return "result";
    }
}

I'm just trying to get input form and display them in console, but no way... When I make a request in my browser: http://localhost:8080/form I obtain a white page with follow string "form", it doesn't display the textfields and button. I have in pom.xml the thymeleaf dependency:

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

Does anyone known what is the problem with my code?

Upvotes: 1

Views: 1333

Answers (1)

Avijit Barua
Avijit Barua

Reputation: 3086

Seems i got your problem. Change this section 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

to 

<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sf="http://www.w3.org/1999/xhtml" lang="en">

And change your 

<p>Username: <input type="text" th:field="*{username}"/></p>
<p>Password: <input type="text" th:field="*{password}"/></p>

to 

  <p>Username: <input type="text" id="username" name="username"/></p>
  <p>Password: <input type="text" id="password" name="password" /></p>

One more thing, Change you @RestController to @Controller If it works, let me know.

Upvotes: 3

Related Questions