jquery添加更多表单项

所以这里是我的问题，我想要的是允许我们的销售人员在客户联系人中添加更多的电话号码

我们有一个像这样的表格。（注I仅显示我们接触区域的零件）

试试这个演示-

把id改成class就行了。如果由于某种原因无法删除id，请在If块内执行以下操作

$input = $('#numbers input').last();
$input.clone(false).find("*").attr("id",$input.attr("id")+'111').attr('value','').appendTo("#number");

您需要在该字段上输入名称，否则表单将不会随帖子一起提交。仅提交具有名称的输入。当然，除非您是通过AJAX提交并自己构建post数据

不要将数据存储为逗号分隔的值。为电话号码保留一个单独的表格，并在人员和他们的电话号码之间使用一对多关系。标准化数据（几乎）总是正确的选择

你真的需要无限的电话号码吗？或者一些小的、固定的数字就足够了？比如，电话、备用电话和手机？如果3可以，为什么不创建三个文本框并使后两个可选

您可以使用以下内容：

例如：

$(function() {
     $(document).on('blur','[name="phone"]', function() {
         var $phones = $('[name="phone"]'),
             empty = $phones.filter( function() { return !$(this).val(); } ).length;
         if (empty == 0) { // don't add a new one unless they all have values
            $phones.filter(':last').after( '<input type="text" name="phone" class="phone" type="numbers" />' );
         }
     });
});

$（函数（）{
$（document）.on（'blur'，'name=“phone”]'，function（）{
var$phones=$（'[name=“phone”]'），
empty=$phones.filter（函数（）{return！$（this.val（）；}）.length；
如果（empty==0）{//除非它们都有值，否则不要添加新的
$phones.filter（':last'）。在（''）之后；
}
});
});

我的想法是：

register(1);
function register(i)
{
    $('#no'+i).blur(function()
    {
        if($('#no'+i).val().get().matches(reg))
        {
            generated_id="#no"+++i;
            $('#numbers').append('<div><input type="text" id='+generated_id+'...></div>')
            register(i);
        }
    })
}

寄存器（1）；
功能寄存器（i）
{
$（'#no'+i）.blur（函数（）
{
if（$（'#no'+i）.val（）.get（）.matches（reg））
{
生成的_id=“#否”+++i；
$（“#数字”）。附加（“”）
登记册（i）；
}
})
}

在您的线路上

$phones。查找（':last'）

您想改用

过滤器

。我相信你知道为什么。@WebDeveloper-因为

find

搜索子体，而

filter

过滤当前列表

$phones

是一个没有子项的输入列表。@mrtsherman谢谢你的提示。所以filter搜索$phone，而find搜索$phone+这是儿童版的，这就是你想要的吗mean@WebDeveloper-

find

只搜索子项，而不是当前列表。@Herman thnaks先生今天学到了一些新东西。我的代码也能正常工作；）在本例中，请尝试键入一个长电话号码。你创建了很多输入框。我确实看过小提琴。如果我在初始输入框中键入123456890，我会得到六个新的空输入框。Fiddle链接正确吗？@mrtsherman ys链接正确，您使用的浏览器正确

$input = $('#numbers input').last();
$input.clone(false).find("*").attr("id",$input.attr("id")+'111').attr('value','').appendTo("#number");

$(function() {
     $(document).on('blur','[name="phone"]', function() {
         var $phones = $('[name="phone"]'),
             empty = $phones.filter( function() { return !$(this).val(); } ).length;
         if (empty == 0) { // don't add a new one unless they all have values
            $phones.filter(':last').after( '<input type="text" name="phone" class="phone" type="numbers" />' );
         }
     });
});

register(1);
function register(i)
{
    $('#no'+i).blur(function()
    {
        if($('#no'+i).val().get().matches(reg))
        {
            generated_id="#no"+++i;
            $('#numbers').append('<div><input type="text" id='+generated_id+'...></div>')
            register(i);
        }
    })
}