Comment soumettre un formulaire en utilisant JavaScript

JavaScript est un langage de programmation Web de haut niveau qui devient populaire de jour en jour. Il donne à nos pages Web et à nos applications Web la possibilité d'effectuer certaines actions et de les rendre interactives. JavaScript propose des formulaires aux développeurs Web qui aident les développeurs à collecter des données auprès des utilisateurs et à stocker ces données dans une base de données. Lorsque vous travaillez avec de nombreuses applications et sites Web, la soumission des formulaires est un phénomène critique.

Dans cet article, nous allons passer par la façon de soumettre un formulaire en utilisant JavaScript en détail, mais d'abord, nous verrons comment créer un formulaire HTML.

Création de formulaire HTML

Un formulaire HTML peut être créé en utilisant la balise offerte par HTML elle-même et il faut deux attributs:

• Le premier est «l'action» qui contient une URL (qui gère la soumission du processus de forme).
• Le deuxième attribut est la «méthode» qui a une méthode HTTP.

Une méthode HTTP peut être de différents types et les deux les plus couramment utilisées sont:

• Get (utilisé pour obtenir des données d'un serveur)
• POST (utilisé pour écrire des données sur le serveur)

Cependant, nous n'utiliserons pas ces deux attributs dans ce post car nous ne travaillons pas avec un serveur.

Écrivons maintenant le code html pour la création de formulaires:

Soumettre

Dans le code ci-dessus, nous avons créé un formulaire et donné le identifiant attribut à la forme dont nous verrons la signification dans un moment. Ensuite, nous avons défini deux champs d'entrée, puis défini un bouton qui a un type de soumettre. À la fin, nous avons placé un scénario Tag et référencé le nom de fichier "code.js«Cela contiendra notre code JavaScript.

Formulaire d'accès et récupérer les valeurs du formulaire

Maintenant que nous avons terminé avec la création de notre formulaire, accédons à ce formulaire à partir de JavaScript, puis récupérons les valeurs de nom d'utilisateur et mot de passe qui sont présents à l'intérieur de la balise de formulaire. Pour accéder au formulaire, nous utiliserons le identifiant attribut mentionné précédemment via le code suivant:

var myform = document.getElementById («myform»);

De la même manière, nous pouvons également obtenir les valeurs des champs d'entrée en utilisant le identifiant attribut donné dans le formulaire HTML. La seule différence est que nous donnerons la valeur à la fin du getElementbyid afin que nous puissions récupérer la valeur du champ de saisie et non l'élément lui-même:

var username = document.GetElementByid («nom d'utilisateur»).valeur;
var mot de passe = document.getElementByid ('mot de passe').valeur;

Soumettre le formulaire et valider les données

Pour soumettre le formulaire, nous utiliserons le auditeur d'événements qui écoute un écouteur spécifié en continu. Un événement est simplement une interaction de HTML et de JavaScript déclenché par un utilisateur ou un navigateur lorsque l'utilisateur manipule une page et cet événement est géré par l'écouteur de l'événement.

var myform = document.getElementById («myform»);
// Écouteur d'événements qui écoute l'événement de soumission
ma forme.addEventListener ("soumettre", fonction (e)
e.PARVEFAULT ();
// Récupérer les valeurs
var username = document.GetElementByid («nom d'utilisateur»).valeur;
var mot de passe = document.getElementByid ('mot de passe').valeur;
// Valider les champs de nom d'utilisateur et de mot de passe
if (username == "|| mot de passe ==")
alert ("Veuillez remplir tous les champs requis");

autre
alert ("Formulaire de la soumission réussie");

)

Dans le code ci-dessus, nous obtenons d'abord la référence du formulaire en utilisant le identifiant attribut puis lancez un auditeur d'événements de "soumettre" sur cette forme. La fonction spécifiée dans l'événement sera invoqué une fois que l'utilisateur clique sur le bouton Soumettre.

À l'intérieur de la fonction, nous avons effectué notre validation, c'est-à-dire que si les champs d'entrée du nom d'utilisateur ou du mot de passe sont vides, nous verrons un message dans la boîte d'alerte disant Veuillez remplir tous les champs requis Sinon, nous recevrons le message de Soumission de formulaire réussi.

Vérirons d'abord en cliquant sur le bouton Soumettre en laissant les deux champs d'entrée vides:

Remplissons maintenant les deux champs et voyons la sortie:

Conclusion

Les formulaires sont très utiles pour collecter des données des utilisateurs, puis manipuler ou jouer avec ces données en JavaScript. Dans cet article, nous avons pris l'aide d'un HTML Tag pour initialiser un formulaire, puis définir deux champs d'entrée et un bouton. Ensuite, nous avons accédé à l'élément de formulaire à l'intérieur d'un fichier javascript, puis avons récupéré les valeurs des champs d'entrée de formulaire à l'aide identifiant attribut.

En fin de compte, nous avons répondu à la question de savoir comment soumettre un formulaire à l'aide de JavaScript en lançant un écouteur d'événements qui écoutera l'événement de soumission, et chaque fois qu'un utilisateur clique sur le bouton Soumettre, cet événement sera licencié. Nous avons également validé nos champs d'entrée à l'intérieur de la fonction d'écoute d'événement.