javascript plus and minus script stop working in loop because of square brackets

Question

I have a cart where the product and quantity gets displayed in a loop. I have added the html below but the values and quantity values will be replaced by php output in a loop..

 function incrementValue(e) { e.preventDefault(); var fieldName = $(e.target).data('field'); alert(fieldName); var parent = $(e.target).closest('span'); var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10); if (!isNaN(currentVal)) { parent.find('input[name=' + fieldName + ']').val(currentVal + 1); } else { parent.find('input[name=' + fieldName + ']').val(0); } } function decrementValue(e) { e.preventDefault(); var fieldName = $(e.target).data('field'); var parent = $(e.target).closest('span'); var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10); if (!isNaN(currentVal) && currentVal > 0) { parent.find('input[name=' + fieldName + ']').val(currentVal - 1); } else { parent.find('input[name=' + fieldName + ']').val(0); } } $('.updown').on('click', '.button-plus', function(e) { incrementValue(e); }); $('.updown').on('click', '.button-minus', function(e) { decrementValue(e); });

 input, textarea { border: 1px solid #eeeeee; box-sizing: border-box; margin: 0; outline: none; padding: 10px; } input[type="button"] { -webkit-appearance: button; cursor: pointer; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } .updown input[type='button'] { background-color: #eeeeee; min-width: 38px; width: auto; transition: all 300ms ease; } .updown .button-minus, .updown .button-plus { font-weight: bold; height: 38px; padding: 0; width: 38px; position: relative; } .updown .quantity-field { position: relative; height: 38px; left: -6px; text-align: center; width: 62px; display: inline-block; font-size: 13px; margin: 0 0 5px; resize: vertical; } .button-plus { left: -13px; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: none; }

 <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="5" name="quantity[4]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span> <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="6" name="quantity[8]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span> <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="7" name="quantity[6]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span>

it used to work but I had to add the square brackets in the name field to output the unique name name="quantity[6] otherwise it over writes.. it breaks the javascript any help will be very welcome thanks

Answer 1

Some enhancement of your code.

There are prev() and next() function from jquery which save your time to find the input from parent to child.

The error $ is not undefined is caused by you didn't import jquery.

 function incrementValue(e) { e.preventDefault(); var fieldName = $(e.target).attr('data-field'); let inputEle = $(e.target).prev() var currentVal = parseInt(inputEle.val()); if (!isNaN(currentVal)) { inputEle.val(currentVal + 1); } else { inputEle.val(0); } } function decrementValue(e) { e.preventDefault(); var fieldName = $(e.target).data('field'); let inputEle = $(e.target).next() var currentVal = parseInt(inputEle.val()); if (!isNaN(currentVal) && currentVal > 0) { inputEle.val(currentVal - 1); } else { inputEle.val(0); } } $('.updown').on('click', '.button-plus', function(e) { incrementValue(e); }); $('.updown').on('click', '.button-minus', function(e) { decrementValue(e); });

 input, textarea { border: 1px solid #eeeeee; box-sizing: border-box; margin: 0; outline: none; padding: 10px; } input[type="button"] { -webkit-appearance: button; cursor: pointer; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } .updown input[type='button'] { background-color: #eeeeee; min-width: 38px; width: auto; transition: all 300ms ease; } .updown .button-minus, .updown .button-plus { font-weight: bold; height: 38px; padding: 0; width: 38px; position: relative; } .updown .quantity-field { position: relative; height: 38px; left: -6px; text-align: center; width: 62px; display: inline-block; font-size: 13px; margin: 0 0 5px; resize: vertical; } .button-plus { left: -13px; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="5" name="quantity[4]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span> <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="6" name="quantity[8]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span> <span class="updown float-end"> <input type="button" value="-" class="button-minus" data-field="quantity"> <input type="number" step="1" max="" value="7" name="quantity[6]" class="quantity-field"> <input type="button" value="+" class="button-plus" data-field="quantity"> </span>