javascript - 单击按钮时如何创建带有文本字段的表单

Question

我有一个包含 3 个文本字段的表单:

  <form id="form1" name="form1"action="">
  <td><input name="name" type="text" id="name" /></td>
  <td><input name="address" type="text" id="address"  /></td>
  <td><input name="age" type="text" id="age" /></td>

   ///Add Button here
  </form>

单击“添加表单”按钮时如何生成相同的表单？

Answer 1

您可以通过使“添加”按钮触发服务器端代码来输出另一个表单来完成该服务器端操作，但这意味着重新加载整个页面。

要在不重新加载的情况下执行此操作，您可以使用纯客户端代码，使用 JavaScript .cloneNode() 方法:

<button type="button" id="btnAddForm" onclick="CloneForm('formNameHere');">Add</button>

和 JavaScript:

function CloneForm(formName) {
    var formCount = document.forms.length;
    var oForm = document.forms[formName];
    var clone = oForm.cloneNode(true);
    clone.name += "_" + formCount;
    document.body.appendChild(clone);
}​

(必须更改表单名称，否则我们将无法访问原始表单)

Live test case .