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

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.

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> 

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

En HTML:

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

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

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

En HTML:

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

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

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>

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.

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>