Come faccio a fare un pulsante HTML non ricaricare la pagina

Question

Ho un pulsante (<input type="submit">). Quando viene cliccato, la pagina si ricarica. Dato che ho alcune funzioni jQuery hide() chiamate al caricamento della pagina, questo fa sì che questi elementi siano nascosti di nuovo. Come faccio a fare il pulsante non fare nulla, quindi posso ancora aggiungere qualche azione che si verifica quando si fa clic sul pulsante, ma non ricaricare la pagina.

Answer 1

Utilizzare l'elemento <button> o utilizzare uno <input type="button"/>.

Answer 2

È possibile aggiungere un gestore di clic sul pulsante con jQuery e restituire false.

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

o

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

Answer 3

In HTML:

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

Con jQuery, qualche variante simile, già citata.

Answer 4

In HTML:

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

al fine di evitare di aggiornamento a tutti i "bottoni", anche con onclick assegnato.

Answer 5

non è necessario js o jquery. per interrompere il ricaricamento della pagina, basta specificare il tipo di pulsante come 'pulsante'. se non si specifica il tipo di pulsante, il browser lo imposterà su 'reset' o 'submit', causando il riavvio della pagina.

Answer 6

Come indicato in uno dei commenti sopra riportati, questo problema può essere risolto non inserendo il tag del pulsante all'interno del tag del modulo. Quando il pulsante si trova all'esterno del modulo, la pagina non si aggiorna automaticamente.

Answer 7

Non posso ancora commentare, quindi sto postando questo come risposta. Il modo migliore per evitare la ricarica è come @ utente2868288 ha dichiarato: utilizzando lo onsubmit sul tag form.

Da tutte le altre possibilità menzionate qui, è l'unico modo che consente di attivare la nuova convalida dell'input dei dati del browser HTML5 (<button> non lo fa né i gestori jQuery/JS) e consente le informazioni dinamiche di jQuery/AJAX da appendere sulla pagina. Per esempio:

<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 8

È possibile utilizzare un modulo che include un pulsante di invio. Quindi utilizzare jQuery per impedire il comportamento predefinito di un modulo:

$(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>