根据用户选择动态添加表单元素

时间:2013-03-12 09:49:44

标签: php jquery forms dynamicform

美好的一天......

我有一个问题就是磨齿了一个星期,我找不到完全符合我要求的解决方案。

我正在使用php构建一个应用程序,旨在让员工接受订单并将其提交给相应的部门(类似于购物车,但略有不同)。

提交订单并将其分配给部门是我已经分类的。我的想法是这样的:

  1. 工作人员单击按钮添加项目
  2. 弹出窗口将显示项目菜单
  3. 工作人员可以一次选择一个项目,一旦选择了项目,它就会被添加到订单项目中。
  4. 将从数据库中填充项目。

    我遇到的问题是,对于某些项目,我需要选择包含多个子项目。例如,如果我有一个包含项目的促销包,我需要将促销项目添加到订单列表中,并带有下面的子项。

    以下链接与我想要的内容类似,我需要的是根据工作人员选择的项目添加的表单元素数量不同:

    http://www.daveismyname.com/demos/dynamic-form-elements-with-jquery/

    任何有关如何实现这一目标的想法或指示都将受到高度赞赏。

    编辑:代码已删除,因为它以一种主要方式进行了修订。一旦完成,我会发布最终结果。

1 个答案:

答案 0 :(得分:1)

当工作人员单击按钮添加项目时,您的脚本将触发AJAX调用,该调用从PHP脚本获取有关项目的数据。此数据应包含每个产品的子项目数量。因此,当员工选择项目时,您可以使用项目和子项目填充订单。

关键是使用AJAX来获取数据,我现在假设您在加载页面时生成项目菜单,并在“添加项目”单击时更改css规则显示它。如果您将其更改为AJAX,您将获得有关子项的数据,因此可以正确填充订单。

更新

用户点击“添加项目”链接。 AJAX请求被触发,php脚本返回JSON数组,其中包含有关可用项目的数据。该数组具有所有细节,包括依赖项(子项,当您选择主项时需要添加到订单中)。 php脚本示例:

$list_of_items[] = array(
    'name' => 'Promo pack',
    'image' => '/images/promopack.jpg',
    'subitems' => array(
        array(
            'name' => 'Promo pack item 1',
            'image' => '/images/promopackitem1.jpg'
            ),
        array(
            'name' => 'Promo pack item 2',
            'image' => '/images/promopackitem2.jpg'
            )
        )
);
echo json_encode($list_of_items);

然后使用parseJSON在JavaScript中解码该数据。

如果用户点击没有子项目的项目,您只需将其添加到订单中即可。如果用户单击带有子项的项目,则添加项目本身和所有子项目。由于您将数据作为简单数组(感谢JSON格式),您只需访问该数组的元素即可处理数据。