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.Come faccio a fare un pulsante HTML non ricaricare la pagina
risposta
Utilizzare l'elemento <button>
o utilizzare uno <input type="button"/>
.
È 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; });
Questo non funziona. Restituire false in chrome, almeno nelle ultime versioni, causa ancora un aggiornamento. – user3690202
Questa è l'unica risposta che ha funzionato per me. Ho appena aggiunto return false nella mia funzione e l'aggiornamento si è interrotto sia in safari che in chrome. – VessoVit
In HTML:
<input type="submit" onclick="return false">
Con jQuery, qualche variante simile, già citata.
In HTML:
<form onsubmit="return false">
</form>
al fine di evitare di aggiornamento a tutti i "bottoni", anche con onclick assegnato.
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.
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.
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>
È 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>
- 1. Come ricaricare la pagina corrente in Express.js?
- 2. Selenium: come fare clic su un elemento pulsante HTML?
- 3. Come faccio a fare fantastici cambiamenti di pagina come GitHub?
- 4. Come posso fare in modo che un pulsante reindirizzi la mia pagina a un'altra pagina?
- 5. HTML - Variazione \ contenuti di aggiornamento della pagina senza aggiornare \ ricaricare la pagina
- 6. Come ricaricare un div senza ricaricare l'intera pagina?
- 7. Come ricaricare una pagina dopo l'OK, fare clic sulla pagina di avviso
- 8. Come ricaricare la pagina Web quando cambia l'orientamento?
- 9. Come faccio a fare in modo che Ajax.ActionLink aggiorni un elemento invece di navigare nell'intera pagina?
- 10. Backbone.js cambia URL senza ricaricare la pagina
- 11. JavaScript per ricaricare la pagina come richiesta GET
- 12. Come faccio a fare un pop up in Tkinter quando si fa clic su un pulsante?
- 13. Come faccio a forzare le note a fondo pagina quando la pagina non è piena?
- 14. Fare un'immagine si comporta come un pulsante
- 15. Come ricaricare una pagina JSF da ValueChangeEvent?
- 16. Invia modulo senza ricaricare la pagina
- 17. Come faccio a creare un pulsante Mostra schermo intero per alternare la mia pagina di google maps a schermo intero?
- 18. Come mantenere attiva la sessione senza ricaricare la pagina?
- 19. Come faccio a ricaricare weblogic JSP nella cache al riavvio
- 20. Come ricaricare la vista ionica?
- 21. Duplica una scheda in Chrome senza ricaricare la pagina?
- 22. Come fare un pulsante quadrato
- 23. Come ricaricare automaticamente una pagina Web in un determinato momento?
- 24. Modifica dell'URL senza ricaricare la pagina
- 25. Come faccio a riprodurre in streaming un video openCV su una pagina Web HTML?
- 26. come aggiornare una pagina Django senza ricaricare una pagina?
- 27. Come reagire a un pulsante QML fare clic su C++
- 28. Come faccio a fare questo usando guava?
- 29. Come faccio a fare esponenziazione in python?
- 30. Jquery: Aggiorna/ricarica la pagina facendo clic su un pulsante
L'elemento
è ancora possibile utilizzare l'evento onsubmit form e restituire false se non si desidera restituire –
@AdamC Questo non è vero. Nessun browser si aggiorna quando fai clic su un