evitar la actualización de la página cuando se hace clic en el botón dentro del formulario

Tengo un problema al usar botones dentro del formulario. Quiero que ese botón llame a la función. Lo hace, pero con un resultado no deseado que actualiza la página.

Mi código simple es así

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Al hacer clic en el botón, se llama a la función con la página actualizada, lo que restablece toda mi solicitud anterior que afecta a la página actual que fue el resultado de la solicitud anterior.

¿Qué debo hacer para evitar que la página se actualice?

Deja que getData()devuelva falso. Esto lo arreglará.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

Añadir type="button"al botón.

<button name="data" type="button" onclick="getData()">Click</button>

El valor predeterminado de typepara un botón es submit, que auto publica el formulario en su caso y lo hace ver como una actualización.

Todo lo que necesitas hacer es poner una etiqueta de tipo y hacer el botón de tipo.

<button id="btnId" type="button">Hide/Show</button>

Eso resuelve el problema

El problema es que desencadena el envío del formulario. Si realiza la getDatafunción return false, debería detener el envío del formulario.

Alternativamente, también puede usar el preventDefaultmétodo del objeto de evento:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

en lugar de usar la etiqueta del botón, use la etiqueta de entrada. Me gusta esto,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Si su botón es "botón" predeterminado, asegúrese de establecer explícitamente el atributo type, de lo contrario, WebForm lo tratará como envío por defecto.

si usas js haz esto

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Un método de JavaScript para deshabilitar el botón en sí

document.getElementById("ID NAME").disabled = true;

Una vez que todos los campos del formulario hayan cumplido sus criterios, puede volver a habilitar el botón

Usar un Jquery será algo como esto

$( "#ID NAME" ).prop( "disabled", true);

Por cualquier motivo en Firefox, aunque tengo return false;y myform.preventDefault();en la función, actualiza la página después de que se ejecuta la función. Y no sé si esta es una buena práctica, pero funciona para mí, inserto javascript:this.preventDefault();en el atributo de acción.

Como dije, probé todas las otras sugerencias y funcionan bien en todos los navegadores, pero Firefox, si tiene el mismo problema, intente agregar el evento prevent en el atributo action javascript:return false;o javascript:this.preventDefault();. No intente con javascript:void(0);lo que romperá su código. No me preguntes por qué :-).

No creo que sea una forma elegante de hacerlo, pero en mi caso no tuve otra opción.

Actualizar:

Si recibió un error ... después de que se procesa ajax, elimine la acción del atributo y, en el onsubmitatributo, ejecute su función seguida del falso retorno:

onsubmit="functionToRun(); return false;"

No sé por qué todos estos problemas con Firefox, pero espero que esto funcione.

La función de retorno no funciona en todos los casos. Intenté esto:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

No funcionó para mí.

Traté de devolver falso dentro de la función y funcionó para mí.

function Reset()
{
    .
    .
    .
    return false;
}

Estaba enfrentando el mismo problema. El problema es con la onclickfunción. No debería haber ningún problema con la función getData. Funcionó haciendo que la onclickfunción devuelva falso.

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Esta es la mejor solución:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Nota: mi código es muy simple.

Puede usar ajax y jquery para resolver este problema:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>