Come faccio a fare in modo che un pulsante HTML non ricarichi la pagina


116

Ho un pulsante ( <input type="submit">). Quando viene cliccato, la pagina si ricarica. Poiché ho alcune hide()funzioni jQuery che vengono chiamate al caricamento della pagina, questo fa sì che questi elementi vengano nuovamente nascosti. Come faccio a fare in modo che il pulsante non faccia nulla, quindi posso ancora aggiungere alcune azioni che si verificano quando si fa clic sul pulsante ma non ricaricare la pagina.

Risposte:


228

non è necessario js o jquery. per interrompere il caricamento della pagina è sufficiente specificare il tipo di pulsante come "pulsante". se non si specifica il tipo di pulsante, il browser lo imposterà su "ripristina" o "invia" perché la pagina si ricarichi.

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

3
Funziona! È una buona alternativa a <input type='button' />.
Rick

5
Funziona bene, e in particolare nel caso di Chrome (per il quale la risposta accettata no)
hobailey

3
Lavorare su Chrome su Windows 10. Sì!
ssdscott

82

Usa l' <button>elemento o usa un file <input type="button"/>.


110
L'elemento <button> per impostazione predefinita causa un ricaricamento in chrome (almeno).
AdamC

2
puoi ancora utilizzare il modulo sull'evento di invio e restituire false se non vuoi ancora tornare
neu-rah

4
@ Joe in realtà purtroppo lo fa: / Ho bisogno che la mia webapp funzioni per IE8 e quella ricarica è un po 'fastidiosa ...
Sig.ra Nobody

24
@pbeardshear Lo fa se è inserito in un modulo. quando <button>è posizionato all'esterno di un modulo l'aggiornamento non avviene!
Kevinvhengst

13
aggiungi type="button"l' <button>elemento in cromo e non si aggiorna
Johnny Metz

21

In HTML:

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

per evitare di aggiornare tutti i "pulsanti", anche con un clic assegnato.


15

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

6
Questo non funziona. Restituire false in Chrome, almeno nelle ultime versioni, causa ancora l'aggiornamento.
user3690202

Questa è l'unica risposta che ha effettivamente funzionato per me. Ho appena aggiunto return false nella mia funzione e l'aggiornamento si è interrotto sia in Safari che in Chrome.
VessoVit

13

In HTML:

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

Con jQuery, qualche variante simile, già menzionata.


9

È possibile utilizzare un modulo che include un pulsante di invio. Quindi usa 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>


4

Come affermato in uno dei commenti (sepolti) sopra, questo può essere risolto non posizionando il tag del pulsante all'interno del tag del modulo. Quando il pulsante è fuori dal modulo, la pagina non si aggiorna.


2

Non posso ancora commentare, quindi lo posto come risposta. Il modo migliore per evitare il ricaricamento è come ha detto @ user2868288: utilizzando onsubmitil formtag.

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 farà né i gestori jQuery / JS) e consente di aggiungere le informazioni dinamiche jQuery / AJAX al 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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.