使用 JavaScript 动态生成具有动态名称的表单元素-html教程-PHP中文网

使用 JavaScript 动态生成具有动态名称的表单元素

花韻仙語

发布： 2025-11-17 12:37:02

原创

647人浏览过

使用 javascript 动态生成具有动态名称的表单元素

本文旨在指导开发者如何使用 JavaScript 动态地在表单中创建具有递增名称的输入字段。通过 `addCourse()` 函数和模板字符串，可以方便地生成新的课程输入框，并确保每个输入框的名称都包含唯一的索引，从而便于在后端处理表单数据。

在 Web 开发中，动态生成表单元素是一项常见的需求，尤其是在需要用户输入多个相似数据项时。本教程将演示如何使用 JavaScript 实现这一功能，重点在于动态生成具有递增名称的表单输入框，例如 courses[0][course_name]、courses[1][no_of_students] 等。

实现步骤

HTML 结构准备

立即学习“Java免费学习笔记（深入）”；

首先，需要一个容器元素来存放动态生成的输入框。一个按钮用于触发生成操作。
```
<div>
  <button type="button" class="btn btn-seconday" onclick="addCourse()">Add Course</button>
  <div id="course_add" class="container">
  </div>
</div>
```
登录后复制
注意：course_add div 最初是空的，我们将使用 JavaScript 将新的输入框添加到其中。

NameGPT名称生成器
免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

0

查看详情
JavaScript 函数编写

接下来，编写 JavaScript 函数来动态生成 HTML 代码，并将其插入到容器中。
```
let index = 0;

function addCourse() {
  const courseHtml = generateCourse(index++);
  var mydiv = document.getElementById("course_add");
  mydiv.insertAdjacentHTML('beforeend', courseHtml);
}

function generateCourse(indexValue) {
  return `<div class="form-group">
      <label for="course name">Course Name</label>
      <input type="text" class="block rounded py-1 ml-4 text-sm" name="courses[${indexValue}][course_name]"/>
    </div>
    <div class="form-group">
      <label for="no_of_students">Number of Students</label>
      <input type="text" class="block rounded py-1 ml-4 text-sm" name="courses[${indexValue}][no_of_students]"/>
    </div>`
}

//add the first course instead of using HTML directly
addCourse()
```
登录后复制
- index: 这是一个全局变量，用于跟踪已创建的输入框的数量，并用于生成唯一的名称。
- addCourse(): 此函数是点击按钮时调用的。它调用 generateCourse() 函数来生成新的 HTML 代码，然后使用 insertAdjacentHTML() 方法将代码添加到 course_add 容器中。
- generateCourse(indexValue): 此函数接受一个索引值，并使用模板字符串生成包含两个输入框（课程名称和学生人数）的 HTML 代码。关键在于 name 属性，它使用 ${indexValue} 来插入当前的索引值，从而确保每个输入框都有唯一的名称。
- addCourse(): 在页面加载时自动调用一次，以确保页面加载时至少有一个课程输入框。
代码解释
- insertAdjacentHTML('beforeend', courseHtml)：此方法将 courseHtml 插入到 mydiv 的末尾。beforeend 参数表示将 HTML 代码插入到元素的最后一个子节点之后。
- 模板字符串（反引号 ``）：允许在字符串中嵌入变量，使代码更易读和维护。
- index++: 每次调用 addCourse() 后，index 变量都会递增，确保每次生成的输入框都具有唯一的名称。

注意事项

安全性： 在实际应用中，务必对用户输入进行验证和清理，以防止跨站脚本攻击 (XSS)。
错误处理： 可以添加错误处理机制，例如检查 getElementById() 是否返回 null，以及处理 insertAdjacentHTML() 可能抛出的异常。
样式： 示例代码中使用了 class 属性来应用样式。可以根据需要修改样式类名或使用内联样式。
初始化: 建议在页面加载时至少添加一组输入框，这样用户可以直接填写，无需先点击“Add Course”按钮。

总结

通过本教程，你学会了如何使用 JavaScript 动态生成具有递增名称的表单元素。这种方法可以灵活地处理各种表单需求，提高用户体验，并简化后端数据处理。记住，在实际应用中，务必注意安全性、错误处理和代码可维护性。

以上就是使用 JavaScript 动态生成具有动态名称的表单元素的详细内容，更多请关注php中文网其它相关文章！