web-dev-qa-db-fra.com

Ajouter des champs de formulaire dynamiquement au clic du bouton

Je suis impatient de créer une section de formulaire en cliquant sur un clic de bouton. Dites que je veux ajouter une nouvelle section d'informations sur l'agent du vendeur autant de fois que je le souhaite en cliquant sur le bouton +. La section d'informations sur l'agent du vendeur doit contenir du texte de base, des listes déroulantes, etc.

Ces entrées nouvellement créées doivent donc être stockées dans la base de données. J'ai aussi besoin d'exporter les entrées au format CSV plus tard.

Bien que j'utilise WordPress en tant que plate-forme, les autres solutions PHP/AJAX ajouteraient cette fonctionnalité.

Je ne trouve pas de correspondance parfaite, les formulaires Formidable étaient proches de cela, mais le clic sur le bouton pour ajouter un nouveau m'a conduit à séparer la page. D'autres plugins n'offrent pas la possibilité de le faire.

Vous pouvez suggérer des constructeurs de formulaires tiers gratuits ou payants, des plugins pour wordpress ou des exemples de code pour m'aider à mettre en œuvre ceci au cas où je manquerais quelque chose.

J'ai partagé la capture d'écran du formulaire à coder comme !!

Dynamic form example

1
kushalvm

Vous pouvez le faire en utilisant Javascript, en créant de nouveaux éléments DOM.

Vous pouvez utiliser cette fonctionnalité Essayez vous-même la fonctionnalité de W3Schools

Copiez et collez ce code dans Essayez-le vous-même et voyez comment cela fonctionne. Il ajoute simplement un nouveau paragraphe:

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p><input type="button" value="Add Paragraph" onclick="addPara();"></p>
</div>

<script>
function addPara()
{
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
</script>

</body>
</html>

Maintenant, jetez un coup d’œil à ce message dans SO pour savoir comment ajouter un formulaire.

Désolé, j'ai raté la partie base de données. Vous devrez créer une page php qui traiterait le traitement et le stockage des données dans une base de données. Encore une fois, j'utilise W3schools, essayez la fonctionnalité vous-même (mais en général, ce site Web ne fait pas confiance aux informations de programmation plus sérieuses et professionnelles), voici est le lien avec un exemple montrant comment envoyer des données d'un formulaire à php.

C'est une façon de le faire et cela rafraîchira la page. Ma méthode préférée consiste à utiliser Javascript pour collecter des données, puis à les envoyer à la page php en utilisant un appel AJAX. Voici le lien vers ajax avec php.

Et ceci est le guide sur le travail avec les tables de base de données dans WP , je suppose que vous pouvez simplement utiliser ces fonctions dans une page php permettant de gérer la manipulation des données.

2
Marina Dunst