How to store Thymeleaf registration form data in a database

I created a registration page using thymeleaf and wanted to store user input data in the database. I define everything properly, but when I click on my register button it is not able to store data, and no error is showing in the console when I inspect the registration page.

File SignUp.html

<div class="container mt-5">
    <div class="card" style="width: 55rem; ">
        <div class="card-header text-center bg-info ">
            <h3>Register</h3>
        </div>
        <div class="card-body">
            <form class="mx-1 mx-md-4" th:action="@{/save}" th:method="post" th:object="${consumer}">
                <div class="mb-3">
                    <label class="form-label" for="firstName">first Name </label>
                    <input class="form-control" id="firstName" placeholder="[email protected]" th:field="*{firstName}"
                           th:type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="phoneNumber">phone Number</label>
                    <input class="form-control" id="phoneNumber" placeholder="[email protected]" th:field="*{phoneNumber}"
                           th:type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="email">Email address</label>
                    <input class="form-control" id="email" placeholder="[email protected]" th:field="*{email}"
                           th:type="email">
                </div>
                <div class="form-check d-flex justify-content-center mb-5">
                    <input
                            class="form-check-input me-2"
                            id="form2Example3c"
                            type="checkbox"
                            value=""
                    />
                    <label class="form-check-label">
                        I agree all statements in <a th:href="@{/term}">Terms of service</a>
                    </label>
                </div>

                <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
                    <button class="btn btn-primary btn-lg" type="button">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

RegisterController class

 @PostMapping("/save")
    fun getConsumer(@ModelAttribute("consumer") consumer: Consumer, model:Model):String {
        consumerRepository.save(consumer)
        return "successPage"
    }

GetMapping for signup

 @GetMapping("/register")
    fun registerPage(@ModelAttribute consumer: Consumer, model: Model): String {
        model.addAttribute("consumer", consumer)
        return "SignUp"
    }

EntityClass

package com.nilmani.testthymeleaf.entity

import javax.persistence.Entity
import javax.persistence.GeneratedValue
import javax.persistence.GenerationType
import javax.persistence.Id

@Entity
data class Consumer(
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    val id:Long = -1,
    val firstName:String = "",
    val phoneNumber:Long = -1,
    val email:String = ""
)

What is the reason that the code is not stored in the database?

Solution 1:

The form is not submitted because you're using a simple <button> element and clicking on it will have no effect unless you submit the form using some JavaScript.

However, you can simply use an actual <input> element of type submit:

<div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">                            
    <input class="btn btn-primary btn-lg" type="submit" value="Register" />
</div>

Clicking this element will now actually submit the form.