para - como posicionar un boton en html

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

Question

Tengo un botón ( <input type="submit"> ). Cuando se hace clic en la página se vuelve a cargar. Como tengo algunas funciones jQuery hide() que se invocan en la carga de la página, esto ocasiona que estos elementos se vuelvan a ocultar. Cómo hago para que el botón no haga nada, así que aún puedo agregar alguna acción que ocurra cuando se hace clic en el botón pero no se vuelve a cargar la página.

Answer 1

Como se indicó en uno de los comentarios (ocultos) más arriba, esto puede solucionarse al no colocar 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.

Answer 2

En HTML:

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

para evitar actualizar en todos los "botones", incluso con onclick asignado.

Answer 3

En HTML:

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

Con jQuery, una variante similar, ya mencionada.

Answer 4

No puedo comentar todavía, así que estoy publicando esto como una respuesta. La mejor manera de evitar la recarga es cómo @ user2868288 dijo: usando el onsubmit en la etiqueta del form .

De todas las otras posibilidades mencionadas aquí, es la única manera que permite que se active la nueva validación de entrada de datos del navegador HTML5 ( <button> no lo hará ni los manejadores jQuery / JS) y permite que su información dinámica jQuery / AJAX anexado a la 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>

Answer 5

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; });

Answer 6

Puede usar un formulario que incluye un botón de enviar. A continuación, 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>

Answer 7

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

Answer 8

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á como ''restablecer'' o ''enviar'' a la causa de la página para volver a cargar.

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