jQuery 添加表单输入并更改输入名称

Question

我正在为一位婚礼摄影师制作一个订购单，这样客人就可以从他网站的客户相册部分订购照片。

客人订购 1 到 50 张图片，所以我目前正在使用 jQuery 的 clone() 函数，它运行良好。

但是我还需要更改每个输入的名称属性，每次我添加一个以便表单处理可以接收新的输入。

name="picture-1"
add field
name="picture-2"

有人知道这是否可行吗？

我相信每次调用 clone() 时我都可以使用 addClass()，但是我怎样才能使 addClass() 计数？

谢谢

Answer 1

您只需设置克隆元素的 name 属性。 (在 jQuery 1.6 或更高版本上使用 prop；在 1.5.2 及以下版本上使用 attr。 看起来 attr 可以在1.5 和 1.6；prop 也适用于 1.6 及更高版本。)

但请注意 HTML 表单的工作方式，多个字段具有相同的名称 是可以的，它们都会被发送到服务器，您的代码可以在其中处理所有这些(通常是服务器-side 技术将它们设置为数组或列表)。

例子:

HTML:

<form id='theForm'>
  <input type='text' name='picture-1'>
  <input type='button' id='btnMore' value='+'>
</form>

使用 jQuery 的 JavaScript:

$('#btnMore').click(function() {
  var form, fields, newField;

  form = $("#theForm");
  fields = form.find("input[name^='picture-']");
  newField = $(fields[0]).clone();
  newField.attr('name', 'picture-' + (fields.length + 1));
  newField.insertAfter(fields.last());
});

Live copy