Upon clicking submit, a strange issue arises - the text on buttons and drop-down items in the nav-bar disappears after the form is submitted. Despite this, the functionality still remains intact, leaving me puzzled about how to resolve this perplexing bug. I attempted to prevent page reload with a script, but to no avail. It's possible that imported scripts like Bootstrap could be causing the problem. Has anyone encountered this issue before? Any suggestions or ideas would be greatly appreciated.
Steps Taken:
- Tried preventing page reload using JavaScript
- Moved the nav-bar into another container
- Reviewed configuration class:
.antMatchers("/addUser").permitAll()
Spring Boot Controller Class Code:
@PostMapping("/addUser")
public String addUser(@ModelAttribute FormUser newUser) {
formUserService.registerUser(newUser);
return "index";
}
Javascript Snippet:
let contact_forms = document.querySelector("#user-form-modal");
contact_forms.addEventListener("submit", function(ev) {
ev.preventDefault();
});
Form Structure 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 Styling for Nav-Bar (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;}
Pre-Submission Nav-Bar Appearance::
https://i.sstatic.net/kgPvs.png
https://i.sstatic.net/bPUUF.png
<li class="nav-item"><a class="nav-link"href="https://github.com/xyz"th:text="${references}" target="_blank">some text(!!!!!)</a></li>
Post-Submission Nav-Bar Issue (Missing Text)::
https://i.sstatic.net/qE7rk.png
https://i.sstatic.net/dB8D3.png
<li class="nav-item"><a class="nav-link"href="https://github.com/xyz"th:text="${references}" target="_blank"></a></li>