Comment faire pour qu'un bouton HTML ne recharge pas la page


116

J'ai un bouton ( <input type="submit">). Lorsqu'il est cliqué, la page se recharge. Étant donné que j'ai des hide()fonctions jQuery qui sont appelées au chargement de la page, ces éléments sont à nouveau masqués. Comment puis-je faire en sorte que le bouton ne fasse rien, afin que je puisse toujours ajouter une action qui se produit lorsque le bouton est cliqué mais pas recharger la page.

Réponses:


228

il n'y a pas besoin de js ou jquery. pour arrêter le rechargement de la page, spécifiez simplement le type de bouton comme «bouton». si vous ne spécifiez pas le type de bouton, le navigateur le définira sur «réinitialiser» ou «soumettre», ce qui entraînera le rechargement de la page.

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

3
Cela fonctionne! C'est une bonne alternative à <input type='button' />.
Rick

5
Cela fonctionne bien, et en particulier dans le cas de Chrome (pour lequel la réponse acceptée ne fonctionne pas)
hobailey

3
Travailler sur Chrome sur Windows 10. Ouais!
ssdscott

82

Utilisez l' <button>élément ou utilisez un fichier <input type="button"/>.


110
L'élément <button> par défaut provoque un rechargement dans chrome (au moins).
AdamC

2
vous pouvez toujours utiliser le formulaire onsubmit event et retourner false si vous ne voulez toujours pas revenir
neu-rah

4
En fait il unfortunatelly @ Joe fait: / je besoin de mon webapp au travail pour IE8 et que reload est un peu ennuyeux ...
Mme Nobody

24
@pbeardshear C'est le cas s'il est placé dans un formulaire. quand <button>est placé en dehors d'un formulaire, le rafraîchissement ne se produit pas!
Kevinvhengst

13
ajouter type="button"à l' <button>élément en chrome et il ne rafraîchit pas
Johnny Metz

21

En HTML:

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

afin d'éviter de rafraîchir à tous les "boutons", même avec un clic attribué.


15

Vous pouvez ajouter un gestionnaire de clics sur le bouton avec jQuery et renvoyer false.

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

ou

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

6
Cela ne marche pas. Renvoyer false dans Chrome, du moins dans les dernières versions, provoque toujours une actualisation.
user3690202

C'est la seule réponse qui a fonctionné pour moi. J'ai juste ajouté return false dans ma fonction et l'actualisation s'est arrêtée à la fois dans Safari et Chrome.
VessoVit

13

En HTML:

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

Avec jQuery, une variante similaire, déjà mentionnée.


9

Vous pouvez utiliser un formulaire qui comprend un bouton d'envoi. Ensuite, utilisez jQuery pour empêcher le comportement par défaut d'un formulaire:

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

Comme indiqué dans l'un des commentaires (enterrés) ci-dessus, cela peut être résolu en ne plaçant pas la balise de bouton à l'intérieur de la balise de formulaire. Lorsque le bouton est en dehors du formulaire, la page ne s'actualise pas.


2

Je ne peux pas encore commenter, donc je poste ceci comme réponse. Le meilleur moyen d'éviter le rechargement est de dire comment @ user2868288 a dit: utiliser le onsubmitsur la formbalise.

De toutes les autres possibilités mentionnées ici, c'est le seul moyen qui permet de déclencher la nouvelle validation d'entrée de données du navigateur HTML5 ( <button>ne le fera pas ni les gestionnaires jQuery / JS) et permet à vos informations dynamiques jQuery / AJAX d'être ajoutées sur le page. Par exemple:

<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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.