Comment empêcher les boutons HTML de soumettre des formulaires ?

Comment empêcher l'envoi d'un formulaire à partir de boutons

Problème :
Dans certains scénarios, comme l'utilisation de HTML5 éléments de bouton pour ajouter ou supprimer des éléments, il est essentiel d'empêcher le bouton de suppression de déclencher l'envoi du formulaire. Bien que le bouton Ajouter ne soumette pas le formulaire, le bouton Supprimer le fait. Ce problème nécessite une solution pour désactiver l'envoi de formulaire pour le bouton souhaité.

Solution :

Le comportement par défaut des éléments de bouton HTML5 est de soumettre le formulaire dans lequel ils sont contenus. . Pour remplacer ce comportement, un attribut de type explicite doit être spécifié. En définissant le type sur « bouton » au lieu de « soumettre » par défaut, nous pouvons empêcher le bouton de déclencher l'envoi du formulaire.

L'extrait de code corrigé ci-dessous montre comment réaliser cette modification :

<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

Explication :

L'attribut "type" dans les éléments HTML définit le type de bouton utilisé. Le définir sur "bouton" indique clairement que le but du bouton est d'exécuter une fonction JavaScript sans actions de formulaire supplémentaires. Le « retour faux ; » La déclaration empêche en outre la soumission du formulaire lorsque vous cliquez sur le bouton.

En effectuant cette modification, le bouton Supprimer ne provoquera plus la soumission du formulaire, tandis que le bouton Ajouter continue de fonctionner comme prévu sans soumettre le 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!