使用 JavaScript 创建动态表单：逐步指南和常见问题解答

2024-03-04 15:12:52

## 动态表单：使用 JavaScript 构建交互式表单

引言

动态表单是一种强大且多功能的工具，允许用户根据需要添加或删除字段。它们在需要收集不同数量的信息的情况下特别有用，例如在创建购物清单或收集反馈时。在本指南中，我们将深入探讨如何使用核心 JavaScript 构建动态表单，从而创建交互式且用户友好的体验。

### 创建表单

第一步是创建一个基本表单结构。这涉及创建一个 <form> 元素，并包含一个 <div> 元素来容纳表单控件和按钮。添加按钮将使我们能够触发添加新字段的过程。

<form id="dynamic-form" method="POST">
  <div class="controls">
    <button class="add-button" onclick="add()">
      <i class="fa fa-plus"></i>Add Item
    </button>
  </div>
</form>

### 添加字段

接下来，我们将创建一个函数来处理添加新字段。此函数将使用 createElement() 方法创建所需的字段，并将其附加到表单。

function add() {
  // 创建文本输入字段
  const priceField = document.createElement("input");
  priceField.setAttribute("type", "text");
  priceField.setAttribute("name", "price");
  priceField.setAttribute("placeholder", "Price");

  // 创建数量输入字段
  const quantityField = document.createElement("input");
  quantityField.setAttribute("type", "number");
  quantityField.setAttribute("name", "quantity");
  quantityField.setAttribute("placeholder", "Quantity");

  // 创建税率输入字段
  const taxField = document.createElement("input");
  taxField.setAttribute("type", "text");
  taxField.setAttribute("name", "tax");
  taxField.setAttribute("placeholder", "Tax");

  // 将字段附加到表单
  const formField = document.getElementById("dynamic-form");
  formField.appendChild(priceField);
  formField.appendChild(quantityField);
  formField.appendChild(taxField);
}

### 获取输入值

为了处理用户输入，我们需要一个函数来获取每个字段的值。这可以通过使用 oninput 事件侦听器来实现，该事件侦听器会在每次更改输入时触发。

function getInputValues() {
  // 获取所有输入字段
  const inputs = document.querySelectorAll("input");

  // 提取字段值并将其存储在对象中
  const data = {};
  for (let i = 0; i < inputs.length; i++) {
    const input = inputs[i];
    data[input.name] = input.value;
  }

  // 返回包含输入值的对象
  return data;
}

### 添加合计行

为了方便起见，我们还可以添加一行来显示所有行的总和。

function calculateTotal() {
  // 获取输入值
  const data = getInputValues();

  // 计算总计
  let total = 0;
  for (const key in data) {
    total += parseFloat(data[key]);
  }

  // 创建合计行
  const totalRow = document.createElement("tr");
  totalRow.innerHTML = `<td></td><td></td><td></td><td>${total}</td>`;

  // 将合计行附加到表格
  const table = document.querySelector("table");
  table.appendChild(totalRow);
}