Thymeleaf text disappear from buttons and drop-down items after submitting a form

Question

Before I click on submit, everything is totally normal. After I submit the form on the website the page reloads and the text disappears from the buttons and drop-down items in the nav-bar for example. I can still click on them and they do whatever they have to do but there is no text anymore and I don't know how to fix this bug. I wrote a small script to prevent the page to reload believing it would help to solve the problem but the issue is the same. I have bootstrap and other scripts been imported that might be the problem. Is there anybody met this problem before? Any idea? Any small suggestion would be greatly appreciated.

What I have tried so far:

1. Prevent the page to reload when submitting the form using javascript
2. Put the nav-bar in another container
3. Configuration class: .antMatchers("/addUser").permitAll()

Controller class in the spring boot code

@PostMapping("/addUser")
    public String addUser(@ModelAttribute FormUser newUser) {
        
        formUserService.registerUser(newUser);
        
        return "index";
    }

javascript:

let contact_forms = document.querySelector("#user-form-modal"); 
contact_forms.addEventListener("submit", function(ev) {
    ev.preventDefault();
});

form in index.html:

<form id="user-form-modal" action="" class="needs-validation" name="index" th:action="@{/addUser}" th:object="${formuser}" method="post">
    <div class="form-group">
        <label for="name">What's your name?</label>
        <input type="text" class="form-control" id="name" th:field="*{name}" placeholder="Name">
        <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <div class="form-group">
        <label for="email">What is your email?</label>
        <input type="text" class="form-control" id="email" th:field="*{email}" placeholder="Email">
        <div class="invalid-feedback">Please fill out this field.</div>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

css for nav-bar (for example):

.navbar {
    background: #302a34; /*for browsers that do not support  gradient.*/
    background: linear-gradient(#787878, #3c3c3c, #000000);
    display: flex;
    max-width: 100%;
    
}

.container {
    max-width: 100%
}

#more {display: none;
}

Before submit the form (everything is ok):

<li class="nav-item"><a class="nav-link"href="https://github.com/xyz"th:text="${references}" target="_blank">some text(!!!!!)</a></li>

After the form submitted (No text):

<li class="nav-item"><a class="nav-link"href="https://github.com/xyz"th:text="${references}" target="_blank"></a></li>

Answer 1

After a lot of shots I realised that only those texts disappear where I'm using Thymeleaf. If I put the text right into the html code then everything is fine after submitting the form. So I can fix it now that way but would be happy if I could keep use Thymeleaf in my project.