Maison > interface Web > js tutoriel > Comment empêcher les boutons de formulaire d'actualiser la page ?

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

DDD
Libérer: 2024-12-06 06:23:15
original
679 Les gens l'ont consulté

How to Stop Form Buttons from Refreshing the 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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal