Comment puis-je empêcher le rafraîchissement de la page lorsque le bouton à l'intérieur du formulaire est cliqué?

Question

J'ai un problème en utilisant des boutons à l'intérieur d'un formulaire. Je veux que ce bouton appelle une fonction. Il le fait, mais avec un résultat indésirable qui actualise la page.

Mon code simple ressemble à ceci

    Cliquez

En cliquant sur le bouton, la fonction est appelée avec un rafraîchissement de la page, ce qui réinitialise toutes mes requêtes précédentes et affecte la page actuelle qui était le résultat de la requête précédente.

Que dois-je faire pour éviter le rafraîchissement de la page?

Answer 1

Ajoutez type="button" au bouton.

Click

La valeur par défaut de type pour un bouton est submit, ce qui soumet automatiquement le formulaire dans votre cas et le fait ressembler à un rafraîchissement.

Answer 2

Laissez getData() renvoyer false. Cela va résoudre le problème.

    Cliquez

Answer 3

Le problème est qu'il déclenche la soumission du formulaire. Si vous faites en sorte que la fonction getData return false, alors le formulaire devrait cesser de se soumettre.

Alternativement, vous pourriez également utiliser la méthode preventDefault de l'objet événement :

function getData(e) {
    e.preventDefault();
}

Answer 4

HTML

jQuery

$('#myForm').submit(function() {
    faireQuelquechose();
});

Answer 5

au lieu d'utiliser la balise bouton, utilisez la balise input. Comme ceci,