how to add a JS variable to DTO in Thymeleaf

Viewed 45

I am trying to build a user registration form. I am using a JS plugin to get the phone number in international format. But I have failed to find out how can I then add that variable to the DTO. below is my code

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <!--International phone input field-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>

    <!-- Bootstrap CSS -->
    <link th:rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.1/css/bootstrap.min.css} "/>

    <!-- font awesome-->
    <link th:rel="stylesheet" th:href="@{/webjars/font-awesome/5.15.4/css/all.css} "/>

    <!--    local css file-->
    <link href="/static/css/register_login.css" rel="stylesheet" th:href="@{/css/register_login.css}"/>

    <title>Easy Notifications App</title>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-lg-10 col-xl-9 mx-auto">
            <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
                <div class="card-img-left d-none d-md-flex">
                    <!-- Background image for card set in CSS! -->
                </div>
                <div class="card-body p-4 p-sm-5">
                    <h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>

                    <form id="login" onsubmit="process(event)" action="#" th:action="@{/register}"
                          th:object="${registerDto}"
                          method="post">

                        
                        <div class="form-floating mb-3">
                            <input type="tel" class="form-control" id="tel"
                                   th:field="*{mobileNumber}" placeholder="Mobile Number">
                            <label for="tel"></label>
                        </div>

<div class="d-grid mb-2">
                            <button class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit">
                                Register
                            </button>
                        </div>

                                            </form>
                    <div class = "alert alert-info" style = "display: none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    // Initialize the phone plugin

    const phoneInputField = document.querySelector("#tel");
    const phoneInput = window.intlTelInput(phoneInputField, {
        utilsScript:
            "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    });

    const info = document.querySelector(".alert-info");

    function process(event) {
        event.preventDefault();

        const phoneNumber = phoneInput.getNumber();

        info.style.display = "";
        info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
    }
</script>

</html>

I want to have in my dto i.e. th:field. Right now my form is not submitting probably because of onsubmit="process(event)". Any help is appreciated.

0 Answers
Related