Comment soumettre un formulaire en cliquant sur un lien dans JavaScript?

Un formulaire HTML peut facilement être soumis en cliquant sur n'importe quel élément HTML à l'aide de JavaScript. L'élément de forme a un soumettre() Méthode, et invoquer cette méthode avec un appel externe soumettra le formulaire.

Cet article va se concentrer sur la soumission d'un formulaire lors de la pressage d'un lien. Pour présenter cela, un formulaire sera créé qui va reprendre les détails d'inscription de l'utilisateur, et sur la soumission du formulaire, il va simplement imprimer le nom de l'utilisateur sur la console.

Étape 1: Configuration des éléments HTML

Créez un nouveau document HTML, et dans ce document, créez un formulaire avec un ID particulier, et dans ce formulaire, créez le champ de saisie pour le nom d'utilisateur et le mot de passe. Après cela, au lieu du bouton Soumettre, créez un nouveau lien en utilisant le étiqueter et utiliser l'attribut onClick et le définir égal à linkpress () fonction:

Veuillez taper votre nom d'utilisateur

Veuillez taper votre mot de passe

Lien pour la soumission

À ce stade, ce document HTML produit la page Web suivante:

Notre page Web comprend deux champs d'entrée et un lien qui a un jeu d'attribut onclick ().

Étape 2: Faire le formulaire «Soumettre» sur la presse du lien

Chaque élément de formulaire dans le HTML contient la méthode Soumide (). Pour soumettre un formulaire, il doit être référencé dans le JavaScript, puis la méthode Soumide () doit être appelée en utilisant cette référence. Dans le fichier de script, créez la fonction linkpress () et ajouter les fonctionnalités en utilisant les lignes suivantes:

fonction linkpress ()
formulaire = document.getElementById ("formulaire");
former.soumettre();

La première ligne obtient la référence de notre balise de formulaire et la stocke à l'intérieur de la variable "former". La deuxième ligne utilise cette référence puis appelle la soumission () du formulaire. L'exécution de ce document HTML donne le résultat suivant:

En appuyant sur le lien, le formulaire soumet le formulaire, mais comme il n'y a pas de fichier backend connecté pour recevoir le formulaire, il réinitialise donc le champ.

Étape 3: Invitez le «nom d'utilisateur» lors de la soumission du formulaire

Vous souhaitez ajouter une fonction prêt() lors du chargement complet de la page Web; Par conséquent, ajoutez la propriété de "en charge"Sur la balise comme:

Et puis dans le fichier de script, ajoutez les lignes suivantes:

fonction ready ()
formulaire = document.getElementById ("formulaire");
former.addEventListener ("soumettre", fonction (événement)
événement.PARVEFAULT ();
nom = document.getElementByid ("nom").valeur;
alert ("bienvenue" + nom);
);

Lorsque le document HTML est complètement chargé:

• Un écouteur d'événements est ajouté à l'élément de forme en utilisant sa référence.
• Cet auditeur d'événement écoute l'événement de soumission
• Lors de la soumission, il empêche le comportement par défaut du formulaire (arrêtez la redirection).
• À la fin, il accueille l'utilisateur en utilisant son nom d'utilisateur.

Si la page Web est chargée maintenant, elle donne la sortie suivante:

Comme vous pouvez le voir, le formulaire a été soumis, et en empêchant le comportement par défaut, nous avons pu éviter la nécessité d'un backend pour gérer les données des champs.

Conclusion

Il est vraiment facile de soumettre un formulaire en cliquant sur un lien avec l'aide de JavaScript. L'élément de forme d'un document HTML a cette méthode appelée soumettre(). Pour soumettre le formulaire, vous n'avez qu'à passer un appel explicite à cette méthode, ce que nous avons fait dans cet article.