Comment empêcher les boutons de formulaire d'actualiser la page ?

Empêcher l'actualisation des pages avec les boutons de formulaire

Lors de la création de formulaires avec des boutons, il est courant de rencontrer un problème où les clics sur les boutons déclenchent des actualisations de page indésirables. Cela peut être problématique, surtout si la page contient des données chargées dynamiquement qui sont réinitialisées lors de l'actualisation.

Description du problème

Dans l'extrait de code fourni :

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

Cliquer sur le bouton appelle la fonction getData(), mais cela actualise également automatiquement la page. Cela se produit car le type par défaut d'un bouton dans un formulaire est « soumettre », ce qui lance une soumission de formulaire et recharge la page.

Solution

Pour empêcher l'actualisation de la page , modifiez l'attribut type du bouton en "button" comme ceci :

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

En définissant type="button", le bouton ne lance plus la soumission d'un formulaire. Au lieu de cela, il se comporte comme un bouton normal qui déclenche uniquement l'événement onclick spécifié sans affecter la page.

Explication

L'attribut type définit le type de bouton. Les valeurs possibles sont :

• submit : Soumet le formulaire. Il s'agit de la valeur par défaut.
• reset : Réinitialise le formulaire à son état initial.
• bouton : Agit comme un bouton personnalisé sans soumettre ni réinitialiser le formulaire.

En définissant type="button", vous convertissez efficacement le bouton en un bouton de non-soumission qui simplement déclenche la fonction JavaScript souhaitée sans provoquer d'actualisation de la page.

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!