动态地构建一个形式使用Ajax，jQuery的 [英] Build a form dynamically with Ajax, jQuery

问题描述

我要建一个非常小的互联网的ERP应用程序的PHP / MySQL / codeIgniter / jQuery的
该法案/发票是建立与

I'm building a very small web ERP application with PHP / mySQL / CodeIgniter / jQuery
The Bill/Invoice is built with

current date
client data
etc

现在，我必须将产品添加到正在创建新的发票，无需重新加载/提交页面。每个产品都有其qtty，说明，单价，小计，等等。

Now, I must add products to that new invoice that is being created, without reloading/submitting the page. Each product will have its qtty., description, unit price, subtotal, etc.

我想添加使用Ajax / jQuery的每个产品的行。

I'd like to add each product "row" using Ajax/jQuery.

• 我应该如何打造产品的动态形成的？我的意思是，允许用户从发票添加新的产品行，或删除的产品行，使用Ajax？
• 如何总结表单中的所有动态添加的行，获取发票总额？
• 而我应该如何接收和处理所有的数据后，所以我可以插在发票表中的正确的发票记录，并插入产品记录到products_invoices表？

编辑：在这里你可以看到我想要做
工作示例 http://www.bambooinvoice.org/index.php/invoices/newinvoice

here you can see a working example of what I want to do
http://www.bambooinvoice.org/index.php/invoices/newinvoice

EDIT2：这个jQuery插件似乎正是我一直在寻找
HTTP：//$c$c.google.com/p/jquery-动态表单/

This jQuery plugin seems to be what I was looking for
http://code.google.com/p/jquery-dynamic-form/

推荐答案

基本上你的表单元素为用户不断增加的行新数据添加到DOM动态。我相信jQuery将是一个很大的帮助，在使用标准的API来访问/修改DOM节点。

Basically you have to add the form elements to the DOM dynamically as the user keeps adding rows of new data. I believe jquery will be a lot of help in using standard apis for accessing/modifying DOM nodes.

有关总结的数字，你必须包装有特殊挂钩的数字领域，如＆LT;跨度ID =value_x＆GT; 34 - ; / SPAN＆GT; ，其中 X 是一个计数器。每增加这样的新数据后，遍历例如范围元素和值相加，并在现场展示他们像 $（＃SumTotal公司） .innerHTML =总和;

For summing up figures, you have to wrap the numeric fields with special hooks like <span id="value_x">34</span> where x is a counter. After each addition of such new data, iterate through such span elements and sum the values and display them in a field like $("#sumtotal").innerHTML = sum;

动态更新的形式，当用户点击提交按钮后，所有的表单数据会存储到服务器正常后的数据。您必须使用正确的名称和 ID 属性要处理的服务器和更新一些数据库中的数据字段表中。

After the dynamic updates to the form, when the user clicks the submit button, all the form data will go to the server as normal post data. You must use proper name and id attributes for the data fields that you want to process in the server and update some database table.

这篇关于动态地构建一个形式使用Ajax，jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！