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

Question

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

就像我们从组合框的值中选择“2”一样，应该生成两个个人详细信息字段。后来我必须在PHP的帮助下在数据库中插入这些值。

我也必须为这些生成的字段进行验证。

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

请帮助我，或给我一些链接，我可以得到一些关于这方面的帮助。

谢谢。

Answer 1

首先，我建议你学习使用JQuery（JavaScript库）。

http://api.jquery.com/

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

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

我已经结束了做，而类似于你描述使用jQuery UI自动完成，克隆，重新定位是什么东西，和验证功能，这一切都相对简单。基本上，你会做什么将使用jQuery验证（一个jQuery插件））在窗体上，为您的组合框的一个jQuery UI自动完成与onchange，并具有所有的细节领域，你可能想包含在隐藏表格外的div。当组合框发生变化时，它会调用一个函数，根据需要销毁字段，然后从表单外部克隆空白字段，填充它们（如果需要），并将它们插入表单中的适当位置。验证器运行在类属性上，所以只要确保新字段具有正确的类就足以将它们包含在验证中。 jquery及其插件几乎可以在任何标准的javascript中使用，所以它不应该很难整合。当你弄清楚如何去做东西的时候，有一段时间需要花费时间，但是听起来你会有相当数量的东西，它会使中长期的事情变得更容易。

Answer 2

我会假设你的组合将被识别为“.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”];

做任何你喜欢的验证。