Comment soumettre des données avec plusieurs formulaires en JavaScript – Brilliansolution.com.
Comment soumettre des données avec plusieurs formulaires en JavaScript
Dans ce tutoriel, nous allons créer un Comment soumettre des données avec plusieurs formulaires en JavaScript. Le but de ce didacticiel est d’enseigner comment vous pouvez soumettre plusieurs formulaires. Cela abordera toutes les fonctionnalités importantes qui vous permettront de soumettre tout votre formulaire en une seule soumission. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.
Voici le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.
Création de l’interface
C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que les formulaires html et le résultat des données. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.
<html lang="en"><head><meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" type="text/css" href="https://brilliansolution.com/how-to-submit-data-with-multiple-form-in-javascript/css/bootstrap.css"/>head><body onload="displayResult();"><nav class="navbar navbar-default"><div class="container-fluid"><a class="navbar-brand" href="https://sourcecodester.com">Sourcecodestera>div>nav><div class="col-md-3">div><div class="col-md-6 well"><h3 class="text-primary">How to Submit Data with Multiple Formh3><hr style="border-top:1px dotted #ccc;"/><div class="col-md-5"><button type="button" class="btn btn-success" onclick="newField();"><span class="glyphicon glyphicon-plus">span>button><br /><br /><form method="POST"><div id="forms" class="form-inline"><input type="text" class="form-control fields" placeholder="Enter something here">div><br /><button type="button" class="btn btn-primary" onclick="submitForm();">Submit formbutton>form>div><div class="col-md-7"><table class="table table-bordered"><thead class="alert-info"><tr><th>Data Listth>tr>thead><tbody id="result">tbody>table>div>div><script src="https://brilliansolution.com/how-to-submit-data-with-multiple-form-in-javascript/script.js">script>body>html>Création d’une fonction JavaScript
C’est là que se trouve la fonction principale de l’application. Ce code vous permettra de soumettre plusieurs instances de formulaire lorsque vous cliquez sur le bouton Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.
let fieldId =0;let names =[];function displayResult() let data="";if(names.length>0)for(i =0; i < names.length; i++) data +=''; data +=''+ names[i]+' '; data +=' '; document.getElementById('result').innerHTML= data;;function newElement(parentId, elementTag, elementId, html)const id = document.getElementById(parentId);const newElement = document.createElement(elementTag); newElement.setAttribute('id', elementId); newElement.innerHTML= html; id.appendChild(newElement);function removeField(elementId)const fieldId ="field-"+elementId;const element = document.getElementById(fieldId); element.parentNode.removeChild(element);function newField() fieldId++; let html="
"+'
'; newElement('forms','div','field-'+ fieldId, html);function submitForm()const inputs=document.getElementsByClassName('fields');for(var i=0; ivar val=inputs[i].value; names.push(val.trim()); inputs[i].value=""; displayResult(); Dans le code fourni, nous utilisons plusieurs méthodes pour ajouter dynamiquement de nouveaux champs de formulaire pour soumettre nos formulaires. Pour soumettre plusieurs formulaires, nous allons créer une méthode appelée soumettre le formulaire() Cette fonction soumettra immédiatement tous les champs de saisie dans les formulaires. Nous utilisons la boucle for pour parcourir toutes les entrées du formulaire en décomposant chaque entrée.
Sortir:
Le Comment soumettre des données avec plusieurs formulaires en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.
Voilà, nous avons créé avec succès Comment soumettre des données avec plusieurs formulaires en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !
(Visité 1 fois, 1 visites aujourd’hui)
Cet article a été mis à jour 2023-06-15 16:33:43
