How to prevent page refresh after post method in spring boot application? - spring-boot

Question

I use Spring Boot and Thymeleaf. I have a post method where the form is processing(adding data from fields to database)
I want to use Toastr library to show notifications if adding data is successfull or not after pressing submit button. Library works, but notification is immediately disappear because page refresh occurs after submit button is pressed.
After clicking on submit button I want to stay on the same page
How can I prevent page refresh after clicking submit button to show notification messages?
Controller:
#PostMapping("/sketches/add")
public String addSketch(
#Valid Sketch sketch,
BindingResult result,
ModelMap model,
RedirectAttributes redirectAttributes) {
if (result.hasErrors()) {
return "admin/add-sketch";
}
sketchRepository.save(sketch);
return "redirect:/admin/sketches/add";
}
HTML:
<form action="#" th:action="#{/admin/sketches/add}" th:object="${sketch}" method="post" id="save-sketch">
<div class="add-sketch">
<div class="title">
<div class="title-text">
<p>Title
<span th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="error"></span>
</p>
<input type="text" class="title-input" th:field="*{title}">
</div>
<div class="title-file">
<label for="file-input">
<img th:src="#{/images/add image.png}" alt="upload image">
</label>
<input id="file-input" type="file"/>
</div>
<span id="image-text">No file chosen, yet</span>
</div>
<!--SKETCH TEXT====================================-->
<div class="sketch-text">
<p>Sketch Text
<span th:if="${#fields.hasErrors('text')}" th:errors="*{text}" class="error"></span>
</p>
<textarea name="sketch-area" id="" cols="55" rows="6" th:field="*{text}"></textarea>
</div>
<!--DROPDOWN-->
<div class="select">
<select name="select-category" id="select-category" th:field="*{category}">
<option value="Buttons">Buttons</option>
<option value="Potentiometers">Potentiometers</option>
<option value="Encoders">Encoders</option>
<option value="Leds">Leds</option>
</select>
</div>
<span th:if="${#fields.hasErrors('category')}" th:errors="*{category}" class="error"></span>
<!--ADD GIF=====================================-->
<input type="file" id="gif-file" hidden="hidden">
<button type="button" id="gif-button">Add GIF<i class="fas fa-image"></i></button>
<span id="gif-text">No file chosen, yet</span>
<div class="save-sketch">
<input type="submit" class="save-sketch-button" id="button-save" value="Save Sketch"/>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
document.getElementById('button-save').addEventListener('click', function () {
toastr.info('Button Clicked');
});
</script>
</body>
</html>