web-dev-qa-db-fra.com

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

J'ai un bouton (<input type="submit">). Quand on clique dessus, la page se recharge. Etant donné que jQuery hide() est appelé au chargement de la page, ces éléments sont à nouveau masqués. Comment puis-je faire en sorte que le bouton ne fasse rien, donc je peux toujours ajouter une action qui se produit lorsque l'utilisateur clique sur le bouton sans recharger la page.

htmljavascript-eventsbutton
100
Ankur

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 en tant que "bouton". si vous ne spécifiez pas le type de bouton, le navigateur le configurera pour "réinitialiser" ou "soumettre" avec le motif de rechargement de la page.

 <button type='button'>submit</button>
187
Jafar Rasooli

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

78
Andrew Hare

En HTML:

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

afin d'éviter d'actualiser à tous les "boutons", même avec onclick assigné.

17
user2868288

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; });
14
Chris Gutierrez

En HTML:

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

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

13
pestilence669

Vous pouvez utiliser un formulaire comportant 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>
5
ProgrammingWithRandy

Comme indiqué dans l'un des commentaires (enterrés) ci-dessus, vous pouvez résoudre ce problème en ne plaçant pas la balise button dans la balise formulaire. Lorsque le bouton est en dehors du formulaire, la page ne s'actualise pas.

3
CommonCoreTawan

Je ne peux pas encore commenter, alors je poste ceci comme réponse. Le meilleur moyen d'éviter le rechargement est la façon dont @ user2868288 a déclaré: en utilisant onsubmit sur la balise form.

De toutes les autres possibilités mentionnées ici, c’est le seul moyen qui permet de déclencher la validation de la saisie des 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 à la 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>
2
Gusstavv Gil