Codifiqué una página de carrito y usé dos botones para disminuir y aumentar la cantidad y lo hago funcionar correctamente usando javascript. La mitad del código HTML está aquí,
<form action="payment.php" method="post"> <div class="qty__amount"> <button class="qty__button" id="minus1"><i class="uil uil-minus-square-full"></i></button> <input autocomplete="off" class="qtyamount1 ro_form-qty" type="text" id="qtyamount1" name="qty1" value="0" readonly> <button class="qty__button" id="plus1"><i class="uil uil-plus-square"></i></button> </div> <div class="button"> <button class="checkout__button" type="submit">Checkout</button> </div> </form>El código Javascript está aquí,
document.getElementById("minus1").onclick = function() {minusButton("qtyamount1","itemPrice1","eachItemTotal1")}; document.getElementById("plus1").onclick = function() {plusButton("qtyamount1","itemPrice1","eachItemTotal1")}; function minusButton(quantityID,itemPriceId,eachItemTotalpriceID){ priceDecrease(itemPriceId,quantityID); quantityDecrease(quantityID); eachItemPriceDecrease(eachItemTotalpriceID,itemPriceId); } function plusButton(quantityID,itemPriceId,eachItemTotalpriceID){ priceIncrease(itemPriceId); quantityIncrease(quantityID); eachItemPriceIncrease(eachItemTotalpriceID,itemPriceId); } function quantityDecrease(item){ // quantityDecrease let quantity = 0; quantity = parseInt(document.getElementById(item).value)-1; if(quantity<0){} else{ document.getElementById(item).value = quantity.toString(); } } function quantityIncrease(item){ //quantityIncrease let quantity = 0; quantity = parseInt(document.getElementById(item).value)+1; console.log(quantity); document.getElementById(item).value = quantity.toString(); }La cantidad se muestra en una etiqueta de entrada de solo lectura porque luego puedo obtener valores usando PHP y mostrarlos en otra página. Entonces, en esa página, implemento el código para mostrar ese valor de cantidad.
El código PHP está aquí (de pago.php),
<div class="details"> <p class="pname">Product Name</p> <p class="pvar">Variation</p> <p class="pqty">$80.00 ⨯ <?php echo $_POST["qty1"] ?></p> </div>Entonces, después de agregar este código PHP al archivo payment.php, los botones de aumento y disminución no funcionan. Pero funcionó antes. Entonces, ¿quiero saber cómo solucionar este envío automático?
Solo necesita agregar el atributo HTML onsubmit al HTML de su formulario y llamar a la función event.preventDefault. Como esto:
<form onsubmit="event.preventDefault()" action="payment.php" method="post"> <div class="qty__amount"> <button class="qty__button" id="minus1" type="button"><i class="uil uil-minus-square-full"></i></button> <input autocomplete="off" class="qtyamount1 ro_form-qty" type="text" id="qtyamount1" name="qty1" value="0" readonly> <button class="qty__button" id="plus1" type="button"><i class="uil uil-plus-square"></i></button> </div> <div class="button"> <button class="checkout__button" type="submit">Checkout</button> </div> </form>Se resolvió :) Agregué type="button" al botón.