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

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

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

实现步骤

1. 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 将新的输入框添加到其中。

   

   靠岸学术

   一款集翻译，阅读，文献管理于一体的英文文献阅读器

   下载

2. 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(): 在页面加载时自动调用一次，以确保页面加载时至少有一个课程输入框。

3. 代码解释

   • insertAdjacentHTML('beforeend', courseHtml)：此方法将 courseHtml 插入到 mydiv 的末尾。beforeend 参数表示将 HTML 代码插入到元素的最后一个子节点之后。
   • 模板字符串（反引号 ``）：允许在字符串中嵌入变量，使代码更易读和维护。
   • index++: 每次调用 addCourse() 后，index 变量都会递增，确保每次生成的输入框都具有唯一的名称。

注意事项

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

总结

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