How to store Thymeleaf Registration form data in a database-CodePudding

I created a Registration page using thymeleaf and want to store user input data in database. I define every thing properly ,but when I click on my Register button it is not able to store data ,no error showing in console when I inspect the registration page. SignUp.html

<div >
    <div  style="width: 55rem; ">
        <div >
            <h3>Register</h3>
        </div>
        <div >
            <form  th:action="@{/save}" th:method="post" th:object="${consumer}">
                <div >
                    <label  for="firstName">first Name </label>
                    <input  id="firstName" placeholder="[email protected]" th:field="*{firstName}"
                           th:type="text">
                </div>
                <div >
                    <label  for="phoneNumber">phone Number</label>
                    <input  id="phoneNumber" placeholder="[email protected]" th:field="*{phoneNumber}"
                           th:type="text">
                </div>
                <div >
                    <label  for="email">Email address</label>
                    <input  id="email" placeholder="[email protected]" th:field="*{email}"
                           th:type="email">
                </div>
                <div >
                    <input
                            
                            id="form2Example3c"
                            type="checkbox"
                            value=""
                    />
                    <label >
                        I agree all statements in <a th:href="@{/term}">Terms of service</a>
                    </label>
                </div>

                <div >
                    <button  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 not stored in the database

CodePudding user response：

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 >                            
    <input  type="submit" value="Register" />
</div>

Clicking this element will now actually submit the form.

CodePudding user response：

You have to declare button with <input type = "submit" value="Register">. If you declare button in your view with either <input type = "button"> or <button>Register</button> then page is not reloaded. If page is not loaded then data also not inserted in database. It is mandatory to load data for persist data into database if you are working on ajax then things are different.

Change

<button  type="button">Register</button>

<input type="submit"  value="Register" />