Hola, estoy tratando de crear un formulario que ingrese números, dentro del formulario que tengo en el campo de entrada, pero con un botón para diseñar dicho campo y una etiqueta de anclaje para enviar el formulario a un archivo php. Al hacer clic en uno de los botones, se envía el valor actual de inmediato, ¿cómo detenerlo?
<form name="destination" action="../a.php" method="post"> Quantity : <button onclick="dec('amount')">-</button> <input name="amount" type="text" value="0" size = 1> <button onclick="inc('amount')">+</button><br><br> </form> <a href="javascript:submitForm()">Details</a>Botones JS:
function inc(element) { let el = document.querySelector(`[name="${element}"]`); el.value = parseInt(el.value) + 1; } function dec(element) { let el = document.querySelector(`[name="${element}"]`); if (parseInt(el.value) > 0) { el.value = parseInt(el.value) - 1; } }Función JS de la etiqueta de anclaje:
function submitForm() { document.destination.submit(); } </script>```Puede hacerlo fácilmente, solo incluya event.preventDefault() en su código js.
event.preventDefault() en realidad se usa para prevenir (detener) cualquier evento predeterminado.
function inc(element) { event.preventDefault(); let el = document.querySelector(`[name="${element}"]`); el.value = parseInt(el.value) + 1; } function dec(element) { event.preventDefault(); let el = document.querySelector(`[name="${element}"]`); if (parseInt(el.value) > 0) { el.value = parseInt(el.value) - 1; } } Pero en caso de que no quiera usar js, puede cambiar el tipo predeterminado de botones. El tipo predeterminado del botón es submit , que enviará el formulario. Puedes usar type="button"
En html, el tipo de identificación predeterminado del botón es "enviar", que enviará formularios. Para evitar este comportamiento simplemente asigne un tipo diferente
<button type="button">...</button>