I am unable to add the value to the input field.
i am new to the front-end, currently i am displaying products with price , name, quantity & a button to add to the cart.
In place of quantity i am showing a plus & minus button, when user clicks on plus or minus button the value is incrementing & decrementing but it is not binding to the quantity input field.
Here is my code
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<title>Items List</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>Welcome to LassiShop </h1>
<c:set var="url" value="/cart"/>
<c:if test="${itemsData.size() gt 0}">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<c:forEach items="${itemsData}" var="item">
<tr>
<td>
<c:out value="${item.name}"/>
<input type="hidden" class="name" value="${item.name}">
</td>
<td>
<c:out value="${item.price}"/>
<input type="hidden" class="price" value="${item.price}">
</td>
<td>
<input type='button' value='-' class='sub'/>
<input type="text" name="quantity" readonly='true' value='' class='field'>
<input type='button' value='+' class='add'/>
</td>
<td><button class="btn btn-primary" type="submit">ADD TO CART</button></td>
</tr>
</c:forEach>
</tbody>
</table>
</c:if>
<c:if test="${itemsData.size() eq 0}">
<h3>No Products available for this Category</h3>
</c:if>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script>
$('.add').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
$(document).on('click', ".btn", function() {
var $row = $(this).closest('tr');
var itemData = {
name: $row.find('.name').val(),
price: $row.find('.price').val(),
quantity: $row.find('.quantity').val()
};
console.log(itemData)
$.ajax({
type: "POST",
contentType: "application/json",
url: "/cart",
data: JSON.stringify(itemData),
dataType: 'json',
});
});
</script>
</body>
</html>
Please let me know what's wrong here.
Thanks.
question from:
https://stackoverflow.com/questions/65643341/unable-to-add-the-value-to-the-input-field-in-jquery-plus-minus-buttons 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
