Tengo un formulario en mi página y un botón con id "calcular" en el formulario. Cuando presiono el botón, hará algunos cálculos usando una función. Pero cuando presiono el botón, se comporta como un botón de envío y envía los datos. No quiero enviar el formulario, solo quiero calcular.
<form method="post" action="" enctype="multipart/form-data" id="form_add_data"> ... <button class="btn btn-info" id="calculate" onclick="calculate()"> Calculate </button> ... </form>Uso de la función de cálculo interior:
function calculate(event){ event.preventDefault() return false; }Prevenir el valor predeterminado detendrá la propagación de eventos y devolver false evitará que la página se actualice.
Debe usar Event.preventDefault() .
El preventDefault() cancela el evento si es cancelable, lo que significa que la acción predeterminada que pertenece al evento no ocurrirá. Por ejemplo, esto puede ser útil cuando: Al hacer clic en el botón "Enviar", evita que envíe un formulario. Al hacer clic en un enlace, evita que el enlace siga la URL.
En tu situación:
document.getElementById("calculate").addEventListener("click", function(event){ event.preventDefault() });o:
// in your JS file function calculate(event){ event.preventDefault() }Lea más sobre esto aquí en MDN
type="button" es la respuesta como dijiste.
<button type="button" class="btn btn-info" id="calculate" onclick="calculate()"> Calculate </button>