Построить форму динамически с Ajax, jQuery

Question

Я создаю очень маленькое веб-приложение ERP с PHP / mySQL / CodeIgniter / jQuery
Счет / Счет строится с

current date
client data
etc

Теперь я должен добавить продукты в тот новый счет, который создается, без перезагрузки / отправки страницы. Каждый продукт будет иметь свое количество, описание, цену за единицу, промежуточный итог и т. Д.

Я хотел бы добавить каждую строку продукта, используя Ajax / jQuery.

• Как динамически создавать форму продуктов? Я имею в виду, позволяя пользователям добавлять новую строку продукта или удалять строки продукта из счета, используя Ajax?
• Как суммировать все динамически добавленные «строки» в форме для получения суммы счета-фактуры?
• А как мне получить и обработать все данные почтовых отправлений, чтобы я мог вставить правильную запись счета в таблицу счетов и вставить записи продуктов в таблицу products_invoices?

РЕДАКТИРОВАТЬ: здесь вы можете увидеть рабочий пример того, что я хочу сделать
http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2: этот плагин jQuery, похоже, был тем, что я искал
http://code.google.com/p/jquery-dynamic-form/

Answer 1

, так как вы используете jQuery, я бы использовал плагин jQuery Grid для реализации раздела строк продукта.

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

Это очень настраиваемый и гибкий инструмент, вы можете использовать Ajax для заполнения строк вручную или автоматически (он может читать напрямую из таблицы MySQL с простым PHP-бэкендом), и у вас есть все возможности для итерации всех строк и публикации результатов на сервер, для разбивки на страницы (если вам нужно много строк, мы успешно использовали его с более чем 15.000 строк) и для добавления и других операций.

Надеюсь, это поможет!

Answer 2

По сути, вы должны добавлять элементы формы в DOM динамически, так как пользователь продолжает добавлять строки новых данных. Я полагаю, что jquery очень поможет при использовании стандартного apis для доступа / изменения узлов DOM.

Для суммирования чисел необходимо обернуть числовые поля специальными крючками, такими как <span id="value_x">34</span>, где x - счетчик. После каждого добавления таких новых данных повторяйте такие элементы span, суммируйте значения и отображайте их в поле, например $("#sumtotal").innerHTML = sum;

После динамического обновления формы, когда пользователь нажимает кнопку отправки, все данные формы отправляются на сервер как обычные данные публикации. Вы должны использовать надлежащие атрибуты name и id для полей данных, которые вы хотите обработать на сервере, и обновить таблицу некоторых баз данных.