Comment empêcher les actualisations de pages indésirables lorsque vous cliquez sur des boutons dans des formulaires ?

Empêcher l'actualisation de la page lors d'un clic sur un bouton dans les formulaires

Lors de l'utilisation de boutons dans un formulaire, il est essentiel d'éviter les actualisations accidentelles de page qui perturbent le flux des utilisateurs . Ce problème peut survenir lorsque des boutons sont utilisés pour déclencher des fonctions sans soumettre le formulaire.

Dans l'exemple de code fourni :

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

Le problème est dû au comportement par défaut des boutons, qui est pour soumettre le formulaire. Lorsque vous cliquez sur le bouton, le formulaire est soumis, ce qui entraîne une actualisation de la page. Pour éviter ce rafraîchissement indésirable, la modification suivante peut être apportée :

Ajouter type="button" au Button

<button name="data" type="button" onclick="getData()">Click</button>

En ajoutant type="button" , le comportement de soumission par défaut du bouton est remplacé et il ne lance plus la soumission du formulaire. Au lieu de cela, il exécute simplement la fonction getData() spécifiée sans provoquer d'actualisation de la page.

Pourquoi utiliser type="button" ?

Par défaut, les boutons dans un formulaire ont un type de « soumettre », ce qui signifie qu'ils déclenchent la soumission du formulaire lorsqu'ils sont cliqués. L'attribut type="button" supprime ce comportement par défaut et fait en sorte que le bouton agisse comme un bouton personnalisé qui appelle la fonction souhaitée sans aucune soumission de formulaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!