Question

我的应用程序页面之一的当前设计是这样的，输入字段“email”在那里我们可以提供由逗号分隔的多个电子邮件地址。用户可以提供电子邮件ID，点击“更新”按钮将更新数据库。

我必须以这样一种方式重新设计它，现在对于每个电子邮件地址，我必须提供一个单独的输入字段。现有“电子邮件”输入字段的右侧应该有一个链接（例如“添加更多”）。点击此链接“添加更多”将为您提供现有“电子邮件”字段下方的新文本框/输入。再次单击链接将为您提供一个额外的输入字段，我可以在其中提供电子邮件ID。同样，我们可以为单独的电子邮件ID添加最多10个输入字段。

你能告诉我如何设计这个。以及我们将如何提供验证，我们无法在10之后添加更多输入字段。

Answer 1

使用.append（或任何jQuery实用程序函数）添加新的HTML元素：

<button onclick="add()">Add</button>
<div id="emails">
    <div><input type="text" /><button onclick="del(this)">Delete</button></div>
</div>

var numAdd = 1;
var add = function() {
    if (numAdd >= 10) return;
    $('#emails').append('<div><input type="text" /><button onclick="del(this)">Delete</button></div>');
    numAdd++;
};

var del = function(btn) {
    $(btn).parent().remove();
};

fiddle

单击链接将提供其他文本框/输入字段

1 个答案: