根据Javascript组合框的选择动态添加表单字段


Adding dynamically form fields depending on selection of combo box with Javascript

我必须为一个网站制作一个信息提交页面,其中会有一些字段,这些字段应该在选择组合框值后在值上生成。

就像我们从组合框的值中选择"2"一样,应该生成两个个人详细信息字段。稍后,我必须在PHP的帮助下在DB中插入这些值。

我还必须对这些生成的字段进行验证。

有很多领域我必须使用类似的东西。但我必须从它开始。

请帮我,或者给我一些链接,在那里我可以得到一些关于这方面的帮助。

谢谢。

首先,我建议您学习使用JQuery(javascript库)。

http://api.jquery.com/

http://docs.jquery.com/Plugins/Validation

http://docs.jquery.com/UI/Autocomplete

我最终做了一些类似于您所描述的使用jquery UI自动完成、克隆、重新定位和验证功能的事情,而且这些都相对简单。从本质上讲,你要做的是在表单上使用jquery validate(一个jquery插件),为你的组合框放入一个带有onchange的jquery UI自动补全,并将你可能想包含在表单外隐藏div中的所有详细信息字段都包含在内。当组合框更改时,它会调用一个函数,根据需要销毁字段,然后从表单外克隆空白字段,填充它们(如果需要的话)并将它们插入表单中的适当位置。验证器在class属性上运行,因此只要确保新字段具有正确的class就足以将它们包含在验证中。Jquery及其插件几乎在标准javascript的任何地方都能发挥作用,所以集成起来应该不会那么困难。当你想办法做事的时候,会有一段时间,但听起来你无论如何都会有相当多的时间,从中长期来看,这会让事情变得容易得多。

我假设您的组合将用".valueCount"标识,默认金额元素是一个,可以在".field"下找到。所有这些的通用容器由"fieldgroup"标识

第一个字段的名称必须设置为类似dynamicfield[]的名称。将"dynamicfield"替换为所需内容。

然后使用jQuery为您的第一个字段创建一个原型:

var $prototype = $(".field").clone();

注意,.field可以是字段本身的通用包装器。

现在为您的组合创建一个事件处理程序:

$(".valueCount").change(function(){
   var count = $(this).val(), $fields = $(this).closest("fieldgroup").find(".field");

   if ($fields.size() > count)
       //remove fields
       $fields.slice(count).remove();
   else if ($fields.size() < count) {
       //add fields
       for (var i = count - $fields.size() ; i ; i--)
            $prototype.clone().insertAfter($fields.last());
   }           
});

在服务器端,您将拥有单个数组$_REQUEST〔'dynamicfield'〕中的所有值;

对其进行任何您喜欢的验证。