I have an app where users can add items to their cart. Their cart is persisted with Spring Data JPA and saved on a MySQL DB. Anyway, I would like the "Add to Cart" text to be changed to "Remove", and then vice versa, when the button is clicked again.
I have tried different methods, such as using regular JS and trying to change the innerHTML, as well as some JQuery methods I've found here, but I can't seem to get it to change. The code that is currently inside the script in my index.html file is just one example of the code I've tried.
Also, just to be clear, the add to cart is working. It's just not changing when clicked.
Thanks for looking.
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head th:replace="fragments :: head"></head>
<body>
<nav th:replace="fragments :: navigation"></nav>
<h1 th:text="${title}" class="display-5">Add Cheeses</h1>
<p th:unless = "${cheeses} and ${cheeses.size()}">No Items</p>
<table class="table">
<tr>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Price</th>
<th></th>
</tr>
<tr th:each ="cheese : ${cheeses}">
<td th:text ="${cheese.name}"></td>
<td th:text ="${cheese.description}"></td>
<td th:text="${cheese.type}"></td>
<td th:text ="${cheese.price}"></td>
<td>
<form method="post">
<button type="submit" id="changeBtn" onclick="myFunction()" class="btn btn-success btn-sm" name = "cheeseId" th:value="${cheese.id}" th:id="${cheese.id}">Add to Cart</button>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("changeBtn").innerHTML == "Add to Cart") {
document.getElementById("changeBtn").innerHTML = "Remove";
}
else document.getElementById("changeBtn").innerHTML = "Add to Cart";
}
</script>
</body>
</html>
fragments.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head">
<meta charset="UTF-8"/>
<title th:text = "${title}"></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/materia/bootstrap.min.css">
<script th:src="@{webjars/jquery/jquery.min.js}"></script>
<script th:src="@{webjars/jquery/bootstrap.min.js}"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation">
<a class="navbar-brand" href="#">Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese">List</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/add">Add</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/remove">Remove</a>
</li>
<li class="navbar-right" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/account">Account</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/login">Login</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/signup">Signup</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" th:action="@{/logout}" method="post" sec:authorize="isAuthenticated()">
<input class="form-control mr-sm-2" type="hidden" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Logout</button>
</form>
</div>
</nav>
<body>
</body>
</html>
