Dynamically generate form elements with dynamic names using JavaScript

This article aims to guide developers on how to use JavaScript to dynamically create input fields with incrementing names in forms. Through the `addCourse()` function and template strings, you can easily generate new course input boxes and ensure that the name of each input box contains a unique index, making it easier to process form data on the backend.

In web development, dynamically generating form elements is a common need, especially when users are required to enter multiple similar data items. This tutorial will demonstrate how to implement this functionality using JavaScript, focusing on dynamically generating form input boxes with incrementing names, such as courses[0][course_name], courses[1][no_of_students], etc.

Implementation steps

1. HTML structure preparation

   First, a container element is needed to store the dynamically generated input box. A button is used to trigger the build action.

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

   Note: The course_add div is initially empty and we will add the new input box to it using JavaScript.

2. JavaScript function writing

   Next, write a JavaScript function to dynamically generate HTML code and insert it into the container.

    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: This is a global variable used to track the number of input boxes that have been created and used to generate unique names.
   • addCourse(): This function is called when the button is clicked. It calls the generateCourse() function to generate new HTML code, and then uses the insertAdjacentHTML() method to add the code to the course_add container.
   • generateCourse(indexValue): This function accepts an index value and uses a template string to generate HTML code containing two input boxes (course name and number of students). The key is the name attribute, which uses ${indexValue} to insert the current index value, ensuring that each input box has a unique name.
   • addCourse(): Automatically called once when the page loads to ensure that there is at least one course input box when the page loads.

3. Code explanation

   • insertAdjacentHTML('beforeend', courseHtml): This method inserts courseHtml to the end of mydiv. The beforeend parameter means inserting HTML code after the last child node of the element.
   • Template strings (backticks ``): Allow variables to be embedded in strings, making the code more readable and maintainable.
   • index: After each call to addCourse(), the index variable will be incremented to ensure that each generated input box has a unique name.

Things to note

• Security: In real applications, it is important to validate and sanitize user input to prevent cross-site scripting attacks (XSS).
• Error handling: You can add error handling mechanisms, such as checking whether getElementById() returns null, and handling exceptions that may be thrown by insertAdjacentHTML().
• Styles: The class attribute is used in the sample code to apply styles. You can modify the style class name or use inline styles as needed.
• Initialization : It is recommended to add at least one set of input boxes when the page loads so that users can fill them in directly without having to click the "Add Course" button first.

Summarize

In this tutorial, you learned how to use JavaScript to dynamically generate form elements with incrementing names. This approach provides the flexibility to handle a variety of form needs, improves user experience, and simplifies back-end data processing. Remember, in real applications, it is important to pay attention to security, error handling, and code maintainability.

The above is the detailed content of Dynamically generate form elements with dynamic names using JavaScript. For more information, please follow other related articles on the PHP Chinese website!