在 Javascript 中创建具有动态名称的表单元素？

Question

Inside my form, I have a div like this

<div>
  <button type="button" class="btn btn-seconday" onclick="addCourse()">Add Course</button>
  <div id="course_add" class="container">
    <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[0][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[0][no_of_students]"/>
    </div>
  </div>
</div>

When the button is clicked, I want it to create the input fields again inside the div container. But with dynamic name. like If the button is created first time then It should be

    <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[1][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[1][no_of_students]"/>
    </div>

I need

courses[1][course_name] & courses[1][no_of_students]

these names to be incremented whenever new input is created.

I am not sure what to do in the addCourse() function.

function addCourse() {
        i = 1;
        var mydiv = document.getElementById("course_add");
        console.log(mydiv);
    }

Answer 1

You can try this approach

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

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

Answer 2

First of all, notice that you are using getElementById and in the html you are setting the name attribute. to do what you are willing, you need to use createElement and appending the elements.

let index = 0;
const containerDiv = document.getElementById('course_add');
function addCourse(){
    const formGroupDiv = document.createElement('div')
    formGroupDiv.setAttribute('class','form-group');
    const input = document.createElement('input');
    input.setAttribute('id',`courses[${index}][course_name]`);
    formGroupDiv.appendChild(input);
    containerDiv.appendChild(formGroupDiv);
    index++;
}

Answer 3

You can simply try this one:

 let i = 1; function addCourse() { var mydiv = document.getElementById("course_add"); mydiv.innerHTML += `<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[${i}][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[${i}][no_of_students]" /> </div>`; i++; }

 <div> <button type="button" class="btn btn-seconday" onclick="addCourse()">Add Course</button> <div id="course_add" class="container"> <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[0][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[0][no_of_students]" /> </div> </div> </div>

Answer 4

You should try assigning ids to the inputs rather than the div.

<input id="course_name" type="text" class="block rounded py-1 ml-4 text-sm" name="courses[0][course_name]"/>

Then in your onClick function, change the name property for the input like so

function addCourse() {
        let i = 1;
        var courseName = document.getElementById("course_name"); 
        courseName.setAttribute("name", "courses["+i+"][course_name]");
    }

Also, the i counter will not update on second click, I suggest you add another property to the input indicating counter and increment it on click.

<input id="course_name" counter="1" type="text" class="block rounded py-1 ml-4 text-sm" name="courses[0][course_name]"/>

 function addCourse() {
            var courseName = document.getElementById("course_name");
            let i = courseName.attributes[0].name; 
            courseName.setAttribute("name", "courses["+i+"][course_name]");
            courseName.setAttribute("counter", (parseInt(i)+1).toString());
        }

Do the same for Number of Students input.