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 表单的工作方式，可以有多个具有相同名称的字段，它们都会发送到服务器，您的代码可以在其中处理所有这些字段(通常是服务器您使用的端技术将它们设置为数组或列表)。

示例:

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