Не удается изменить кнопку в приложении Spring Boot (например, с «Добавить в корзину» на «Удалить»)

У меня есть приложение, в котором пользователи могут добавлять товары в свою корзину. Их корзина сохраняется с помощью Spring Data JPA и сохраняется в базе данных MySQL. В любом случае, я бы хотел, чтобы текст «Добавить в корзину» был изменен на «Удалить», а затем наоборот, при повторном нажатии кнопки.

Я пробовал разные методы, такие как использование обычного JS и попытки изменить innerHTML, а также некоторые методы JQuery, которые я нашел здесь, но я не могу заставить его изменить. Код, который сейчас находится внутри сценария в моем файле index.html, - это всего лишь один пример кода, который я пробовал.

Кроме того, для ясности, добавление в корзину работает. Просто не меняется при нажатии.

Спасибо, что искали.

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>

Могу я спросить, что такое th:id = "${cheese.id}" в твоей кнопочной метке?

— 09.07.2018 15:32

javascript jquery spring-boot thymeleaf

08.06.2018 23:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

132

Ответы 1

Функция Onclick не сработает, если тип вашей кнопки - «отправить». Самый простой способ - изменить тип кнопки на «button» и отправить форму вручную с помощью функции javascript. Есть хорошее решение здесь

09.06.2018 19:46

Другие вопросы по теме

Vuejs, как заставить v-модель обновляться, когда JQuery изменяет ввод текста?

Зачем использовать класс jQuery в качестве обработчика события .on click?

Как добавить цвета при перезагрузке страницы с помощью javascript и jQuery

Javascript изменить фон атрибута CSS навигационной панели (materializeCSS)

Перечисление длины jQuery для каждого div

AJAX не открывает вложение

Создать ячейку таблицы из вложенного источника данных

Защита API в jQuery

Closest (elem) не возвращается, как ожидалось - возвращает init [elem ..] вместо elem

$ .getJSON в цикле for без инструкции let для совместимости с браузером

Не удается изменить кнопку в приложении Spring Boot (например, с «Добавить в корзину» на «Удалить»)

Ответы 1

Другие вопросы по теме

Похожие вопросы