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

Question

在我的身体里，我有一个这样的div

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

单击按钮时，我希望它在div容器中再次创建输入字段。但有着动态的名字。就像第一次创建按钮一样，它应该是

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

我需要

courses1 & courses1

每当创建新输入时，这些名称都将递增。

我不知道在addCourse()函数中应该做什么。

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

Answer 1

您可以尝试这种方法。

​

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

首先，注意您使用的是getElementById，在html中设置的是name属性。要做您愿意做的事情，您需要使用createElement并附加元素。

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

您可以简单地尝试一下这个：

​

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>

​