bunkdeath
Tengo un problema al usar botones dentro del formulario. Quiero ese botón para llamar a la función. Lo hace, pero con el resultado no deseado de 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 todas mis solicitudes anteriores, lo que afecta la página actual que fue el resultado de la solicitud anterior.
¿Qué debo hacer para evitar que se actualice la página?
detalle
Agregar type="button" al botón.
<button name="data" type="button" onclick="getData()">Click</button>
El valor predeterminado de type para un botón es submitque publica automáticamente el formulario en su caso y hace que parezca una actualización.
-
respuesta perfecta dada aquí
– lago de madera
12 de mayo de 2014 a las 9:11
-
Excepto que esto evita la validación de formularios HTML5 (como para la entrada de type=”email”).
– 2540625
30 de abril de 2015 a las 22:02
-
También puedes agregar
return false;al clic:onclick="getData(); return false;"– JBaczuk
14/09/2015 a las 16:19
-
Esta es la mejor opcion. Si bien “devolver falso” podría funcionar en línea, no existe tal opción, que yo sepa, al agregar detectores de eventos. Especificar el type=”button” realmente salva el día.
– Por siempre novato
06/10/2016 a las 15:51
-
Esta es en realidad la solución “oficial” a este tipo de problema. Devolver falso también PODRÍA funcionar, pero el botón de escribir nunca fallará.
– estudiante0495
17 oct 2017 a las 11:31
JNDPNT
Dejar getData() falso retorno. Esto lo arreglará.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
-
Por cierto. los
onclickla función tiene que devolver falso, nogetData.– Quintín
18 de octubre de 2011 a las 8:51
-
Eso es lo que mencioné, pero está bien, modifiqué la respuesta para que sea más clara.
– JNDPNT
18 de octubre de 2011 a las 8:55
-
no necesita cambiar la función, solo puede usar onclick=”getData(); return false;”
– usuario6269864
9 de agosto de 2016 a las 8:40
-
type="button"es realmente la trampa.– devasia2112
25 de marzo de 2020 a las 14:21
Todo lo que necesita 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
-
¿Puedes elaborar y explicar por qué?
– mjk
5 sep 2017 a las 15:20
-
el comportamiento predeterminado de un botón es del tipo de envío cuando está dentro de un formulario, al cambiarlo al tipo de botón, se puede evitar la publicación
– Ganesh Kodiganti
5 de marzo de 2020 a las 13:00
James Allardice
El problema es que activa el envío del formulario. Si haces el getData función return false entonces debería detener el envío del formulario.
Alternativamente, también podría usar el preventDefault método del objeto de evento:
function getData(e) {
e.preventDefault();
}
mehdiway
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});
-
$(‘.myForm) debe ser $(‘#myForm)
– Mutante
24/09/2013 a las 19:17
David Aremburgo
<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. Como esto,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
-
$(‘.myForm) debe ser $(‘#myForm)
– Mutante
24/09/2013 a las 19:17
Si su botón es el “botón” predeterminado, asegúrese de establecer explícitamente el atributo de tipo; de lo contrario, WebForm lo tratará como enviado de forma predeterminada.
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
});
debe especificar los parámetros, si simplemente usa window.location = window.location.href; Actualizará toda la página y restablecerá todas sus solicitudes anteriores. por favor revise esto: stackoverflow.com/questions/133925/…
– linguini
18 de octubre de 2011 a las 7:43
posible duplicado de ¿Cómo hago para que un botón HTML no vuelva a cargar la página?
– Alex Angas
14 de febrero de 2014 a las 1:21
@bunkdeath: se debe aceptar una respuesta de mierda.
– Jad Chahiné
16 de septiembre de 2016 a las 11:58
@JadChahine lo siento, no me di cuenta de que no he aceptado la respuesta, gracias por señalar esto. Yo era un principiante y no sabía lo que hacía o dejaba de hacer en ese entonces. Pero no aceptaré la respuesta que mencionaste, sino que aceptaré la que me ayudó en ese momento 🙂
– bunkdeath
18/09/2016 a las 18:01