Use ThymeLeaf to create multiple text input boxes-CodePudding

I want there to be four text input boxes for each of the 3 attributes called email, phone number, and service provider. Each input should be stored in a different ArrayList object's email, phone number, and service provider attribute.

I think th:each will be used

Here's my code:

Here is my controller endpoint method:

@GetMapping("/")
    public String formMethod(Model model) {

        ArrayList<User> users = new ArrayList<>(4);

        model.addAttribute("users", users);
        return "communicationForm";
    }

Here is my User class:

public class User {

    String email;
    String phoneNumber;
    String serviceProvider;
    String emailSubject;
    String emailMessage;
    String textSubject;
    String textMessage;

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public String getServiceProvider() {
        return serviceProvider;
    }

    public void setServiceProvider(String serviceProvider) {
        this.serviceProvider = serviceProvider;
    }

    public String getEmailSubject() {
        return emailSubject;
    }

    public void setEmailSubject(String emailSubject) {
        this.emailSubject = emailSubject;
    }

    public String getEmailMessage() {
        return emailMessage;
    }

    public void setEmailMessage(String emailMessage) {
        this.emailMessage = emailMessage;
    }

    public String getTextSubject() {
        return textSubject;
    }

    public void setTextSubject(String textSubject) {
        this.textSubject = textSubject;
    }

    public String getTextMessage() {
        return textMessage;
    }

    public void setTextMessage(String textMessage) {
        this.textMessage = textMessage;
    }
}

Here is my communicationForm.html file

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>OverStay LLC</title>
</head>
<body>
    <h2>Submit the email address or phone number. If the service provider is known, include it. If not, the program can find out.</h2>
    <h3>Enter the service providers like so: T-Mobile, Verizon, AT&T, Visible, Mint Mobile, Metro, Xfinity Mobile. ONLY enter them if you know which one it is</h3>
    <br>

    <form action="#" th:action="@{/sendMessage}" th:object="${users}" method="post">
        <th:block th:each="user : ${users}">
            <p>
                Email:
                <input type="text" th:value="${user.email}" />
            </p>
            </br></br>
        </th:block>

        <br>

        <th:block th:each="user : ${users}">
            Phone Number (Do NOT include a 1 as the first number):
            <input type="text" th:value="${user.phoneNumber}" />
            </br></br>
        </th:block>

        <br>

        <th:block th:each="user : ${users}">
            Service Provider:
            <input type="text" th:value="${user.email}" />
            </br></br>
        </th:block>

        </br></br>
        <input type="submit" value="Submit"/> <input type="reset" value="Reset">
    </form>

</body>
</html>

CodePudding user response：

Thymelef doesn't handle List/ArrayList as a backing object... So you'll have to create another object to hold your users.

public class UserForm {
  private List<User> users;
  // getters and setters
}

With model.addAttribute("form", userForm);, a typical form would look like this:

<form action="#" th:action="@{/sendMessage}" th:object="${form}" method="post">
    <th:block th:each="user, status: ${form.users}">
        <p>
            Email:
            <input type="text" th:field="*{users[__${status.index}__].email}" />
        </p>
        </br>
        </br>
    </th:block>

The controller method for this would look something like:

@PostMapping("/sendMessage")
public String save(@ModelAttribute("form") UserForm form) {