Currently, I am learning Java with Spring Boot and Thymeleaf. While creating some views, I faced a challenge. Initially, I wanted to create a toggle button for "Pending" and "Received". However, now I am attempting to add the option "Cancelled", but I have encountered some issues.
<div class="row mb-3">
<label for="statusCodes" class="col-sm-2 col-form-label"
>Status</label
>
<div class="col-sm-2">
<button
type="button"
id="toggleButton"
class="btn btn-toggle btn-pendente"
data-value="PENDENTE"
>
Pending
</button>
<input
type="hidden"
name="statusCodes"
id="statusCodes"
value="PENDENTE"
/>
</div>
</div>
This div was functioning correctly before.
$(function () {
$("#toggleButton").on("click", function () {
$(this).toggleClass("btn-pendente btn-recebido btn-cancelado");
if ($(this).hasClass("btn-pendente")) {
$(this).text("Pending");
$("#statusCodes").val("PENDING");
} else if ($(this).hasClass("btn-recebido")) {
$(this).text("Received");
$("#statusCodes").val("RECEIVED");
} else if ($(this).hasClass("btn-cancelado")) {
$(this).text("Cancelled");
$("#statusCodes").val("CANCELLED");
}
});
});
I thought adding another class to the button would be simple, but when I did so, clicking on the "Pending" button changed the style to "Received" instead of "Cancelled."
.btn-pendente {
width: 140px;
color: orange !important;
background-color: transparent;
border: 2px solid orange !important;
}
.btn-recebido {
width: 140px;
color: #28a745;
background-color: transparent;
border: 2px solid #28a745;
}
.btn-cancelado {
width: 140px;
color: red;
background-color: transparent;
border: 2px solid red;
}
This marks my first question here, please forgive any mistakes ;)