Maison > interface Web > js tutoriel > Comment empêcher les actualisations de pages indésirables lorsque vous cliquez sur des boutons dans des formulaires ?

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

Patricia Arquette
Libérer: 2024-12-12 11:34:09
original
639 Les gens l'ont consulté

How to Prevent Unwanted Page Refreshes When Clicking Buttons in Forms?

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

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

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal