¿Cómo hago para que un botón HTML no vuelva a cargar la página?


116

Tengo un botón ( <input type="submit">). Cuando se hace clic en él, la página se vuelve a cargar. Como tengo algunas hide()funciones de jQuery que se llaman al cargar la página, esto hace que estos elementos se oculten nuevamente. ¿Cómo hago para que el botón no haga nada, de modo que pueda agregar alguna acción que ocurra cuando se hace clic en el botón, pero no recargar la página?

Respuestas:


228

no hay necesidad de js o jquery. para detener la recarga de la página, simplemente especifique el tipo de botón como 'botón'. si no especifica el tipo de botón, el navegador lo configurará en 'restablecer' o 'enviar' para que la página se vuelva a cargar.

 <button type='button'>submit</button> 

3
¡Esto funciona! Es una buena alternativa a <input type='button' />.
Rick

5
Esto funciona bien, y particularmente en el caso de Chrome (para el cual la respuesta aceptada no lo hace)
hobailey

3
Trabajando en Chrome en Windows 10. ¡Sí!
ssdscott

82

Use el <button>elemento o use un <input type="button"/>.


110
El elemento <button> por defecto provoca una recarga en Chrome (al menos).
AdamC

2
aún puede usar el evento de formulario onsubmit y devolver falso si aún no desea regresar
neu-rah

4
@Joe lamentablemente lo hace: / Necesito que mi aplicación web funcione para IE8 y esa recarga es un poco molesta ...
Sra. Nadie

24
@pbeardshear Lo hace si se coloca dentro de un formulario. cuando <button>se coloca fuera de un formulario, la actualización no se produce.
Kevinvhengst

13
agregar type="button"al <button>elemento en cromo y no se actualiza
Johnny Metz

21

En HTML:

<form onsubmit="return false">
</form>

para evitar la actualización en todos los "botones", incluso con un clic asignado.


15

Puede agregar un controlador de clic en el botón con jQuery y devolver falso.

$("input[type='submit']").click(function() { return false; });

o

$("form").submit(function() { return false; });

6
Esto no funciona. Devolver falso en Chrome, al menos en las últimas versiones, aún causa actualización.
user3690202

Esta es la única respuesta que realmente funcionó para mí. Acabo de agregar return false en mi función y la actualización se detuvo tanto en safari como en Chrome.
VessoVit

13

En HTML:

<input type="submit" onclick="return false">

Con jQuery, alguna variante similar, ya mencionada.


9

Puede utilizar un formulario que incluye un botón de envío. Luego use jQuery para evitar el comportamiento predeterminado de un formulario:

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>


4

Como se indica en uno de los comentarios (enterrado) arriba, esto se puede solucionar no colocando la etiqueta del botón dentro de la etiqueta del formulario. Cuando el botón está fuera del formulario, la página no se actualiza.


2

Todavía no puedo comentar, así que publico esto como respuesta. La mejor manera de evitar la recarga es cómo dijo @ user2868288: usando onsubmiten la formetiqueta.

De todas las otras posibilidades mencionadas aquí, es la única forma que permite que se active la nueva validación de entrada de datos del navegador HTML5 ( <button>no lo hará ni los controladores jQuery / JS) y permite que su información dinámica jQuery / AJAX se agregue en el página. Por ejemplo:

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.