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

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

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

实现思路

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

具体步骤

1. HTML 结构准备：

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

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

   
     Add Course
     
   
     
   

2. JavaScript 函数编写：

   

   凡人网络购物系统jsp版(JspShop)

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

   下载

   接下来，编写 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 `
   
         Course Name
         
       
       
   
         Number of Students
         
       
   `
   }
   
   //add the first course instead of using HTML directly
   addCourse()

3. 代码解释：

   • index 变量：用于记录当前课程的数量，并作为 name 属性中的索引。
   • addCourse() 函数：每次点击“添加课程”按钮时，都会调用该函数，生成新的课程表单元素。
   • generateCourse(indexValue) 函数：根据传入的 indexValue，生成包含课程名称和学生数量输入框的 HTML 字符串。注意，这里使用了模板字符串，可以方便地将 indexValue 嵌入到 name 属性中，例如 name="courses[${indexValue}][course_name]"。
   • insertAdjacentHTML('beforeend', courseHtml)：将生成的 HTML 字符串插入到 course_add 容器的末尾。

完整示例

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

  



  

    Add Course
    

    
  

  

注意事项

• 避免全局变量污染： 尽量将 index 变量封装在函数作用域内，避免全局变量污染。
• 安全性： 如果 index 变量的值来自用户输入或其他不可信来源，需要进行安全验证，防止 XSS 攻击。
• 代码可维护性： 将生成 HTML 字符串的代码封装成单独的函数，可以提高代码的可读性和可维护性。
• 框架应用： 在实际项目中，可以使用前端框架（如 React、Vue、Angular）来更方便地管理和操作 DOM，实现动态生成表单元素的功能。

总结

通过本教程，我们学习了如何使用 JavaScript 动态地创建表单元素，并为这些元素赋予递增的名称属性。这种方法可以方便地处理多个相似的表单数据，提高Web开发的效率。 掌握这种方法，可以灵活地应对各种动态表单的需求。