Construire un formulaire dynamiquement avec Ajax, jQuery

Question

Je construis une très petite application Web ERP avec PHP / mySQL / CodeIgniter / jQuery
La facture / facture est construite avec

current date
client data
etc

Maintenant, je dois ajouter des produits à la nouvelle facture en cours de création, sans recharger / soumettre la page. Chaque produit aura sa quantité, description, prix unitaire, sous-total, etc.

J'aimerais ajouter chaque produit " row " en utilisant Ajax / jQuery.

• Comment dois-je créer les produits sous forme dynamique? Je veux dire, permettre aux utilisateurs d’ajouter une nouvelle ligne de produit, ou de supprimer des lignes de produit de la facture, en utilisant Ajax?
• Comment additionner toutes les " lignes " ajoutées dynamiquement sous la forme, pour obtenir le total de la facture?
• Et comment dois-je recevoir et traiter toutes les données de publication pour pouvoir insérer le bon enregistrement de facture dans la table des factures et insérer les enregistrements de produits dans la table products_invoices?

EDIT: vous pouvez voir ici un exemple concret de ce que je veux faire.
http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2: Ce plugin jQuery semble être ce que je cherchais. http://code.google.com/p/jquery-dynamic-form/

Answer 1

Fondamentalement, vous devez ajouter les éléments de formulaire au DOM de manière dynamique, car l'utilisateur continue d'ajouter des lignes de nouvelles données. Je pense que jQuery sera d’une grande aide pour l’utilisation d’APIS standard pour l’accès / la modification de nœuds DOM.

Pour résumer les chiffres, vous devez envelopper les champs numériques avec des crochets spéciaux tels que <span id="value_x">34</span> où x est un compteur. Après chaque addition de ces nouvelles données, parcourez ces span éléments, additionnez les valeurs et affichez-les dans un champ tel que $("#sumtotal").innerHTML = sum;

.

Après les mises à jour dynamiques du formulaire, lorsque l'utilisateur clique sur le bouton d'envoi, toutes les données du formulaire sont transmises au serveur en tant que données de publication normales. Vous devez utiliser les attributs name et id appropriés pour les champs de données que vous souhaitez traiter sur le serveur et mettre à jour une table de base de données.

Answer 2

Puisque vous utilisez jQuery, j'utiliserais le plugin jQuery Grid pour implémenter la section des lignes du produit.

http://www.trirand.com/blog/

Il est hautement configurable et flexible, vous pouvez utiliser Ajax pour remplir manuellement ou automatiquement les lignes (il peut lire directement depuis une table MySQL avec un simple backend PHP) et vous avez toutes les facilités pour itérer toutes les lignes pour afficher les résultats. sur le serveur, pour faire la pagination (si vous avez besoin de beaucoup de lignes, nous l’avons utilisée avec succès avec plus de 15 000 lignes) et pour faire des ajouts & amp; autres opérations.

J'espère que ça aide!