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

动态生成表单元素名称的 JavaScript 教程

心靈之曲

发布： 2025-11-19 14:33:16

原创

363人浏览过

动态生成表单元素名称的 JavaScript 教程

本文介绍了如何使用 javascript 动态地创建表单元素，并为这些元素赋予递增的名称属性。通过一个添加课程的示例，详细讲解了如何利用 javascript 操作 dom，生成带有动态索引的表单元素，从而方便地处理多个相似的表单数据。

在Web开发中，经常会遇到需要动态生成表单元素的场景，例如添加多个课程、添加多个联系人等。关键在于如何为这些动态生成的元素赋予唯一的名称，以便在后端能够正确地接收和处理数据。本教程将以一个添加课程的示例，详细讲解如何使用 JavaScript 实现这一功能。

实现思路

核心思路是利用 JavaScript 操作 DOM，动态地创建 HTML 元素，并使用一个全局变量来维护索引，每次创建新的元素时，索引递增，并将该索引嵌入到元素的 name 属性中。

具体步骤

HTML 结构准备：

首先，我们需要一个包含“添加课程”按钮和一个容器的 HTML 结构。容器用于存放动态生成的课程表单元素。

立即学习“Java免费学习笔记（深入）”；
```
<div>
  <button type="button" class="btn btn-seconday" onclick="addCourse()">Add Course</button>
  <div id="course_add" class="container">
  </div>
</div>
```
登录后复制
JavaScript 函数编写：

凡人网络购物系统jsp版(JspShop)
基于jsp+javabean+access(mysql)三层结构的动态购物网站，v1.2包含v1.0中未公开的数据库连接的java源文件一，网站前台功能：产品二级分类展示：一级分类－－二级分类－－产品列表－－详细介绍（名称，图片，市场价，会员价，是否推荐，功能介绍等）产品搜索：关键字模糊搜索定购产品：选择商品－－确认定购－－填写收货人信息－－选择付款方式－－订单号自动生成（限登录用户）

0

查看详情

接下来，编写 JavaScript 函数 addCourse() 来动态创建表单元素。这个函数主要包含以下几个步骤：
- 定义一个全局变量 index 用于记录课程的数量，初始值为 0。
- addCourse() 函数负责生成新的课程表单元素。
- generateCourse() 函数根据 indexValue 生成包含课程名称和学生数量输入框的 HTML 字符串，并将 indexValue 嵌入到 name 属性中。
- 将生成的 HTML 字符串插入到 course_add 容器中。
- 每次调用 addCourse() 函数时，index 递增。
```
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 变量：用于记录当前课程的数量，并作为 name 属性中的索引。
- addCourse() 函数：每次点击“添加课程”按钮时，都会调用该函数，生成新的课程表单元素。
- generateCourse(indexValue) 函数：根据传入的 indexValue，生成包含课程名称和学生数量输入框的 HTML 字符串。注意，这里使用了模板字符串，可以方便地将 indexValue 嵌入到 name 属性中，例如 name="courses[${indexValue}][course_name]"。
- insertAdjacentHTML('beforeend', courseHtml)：将生成的 HTML 字符串插入到 course_add 容器的末尾。

完整示例

将上述 HTML 和 JavaScript 代码整合在一起，即可实现动态添加课程表单元素的功能。

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Form Elements</title>
</head>
<body>

  <div>
    <button type="button" class="btn btn-seconday" onclick="addCourse()">Add Course</button>
    <div id="course_add" class="container">
    </div>
  </div>

  <script>
    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()
  </script>

</body>
</html>

登录后复制