Create form elements with dynamic names in Javascript?-CodePudding

Inside my form, I have a div like this

<div>
  <button type="button"  onclick="addCourse()">Add Course</button>
  <div id="course_add" >
    <div >
      <label for="course name">Course Name</label>
      <input type="text"  name="courses[0][course_name]"/>
    </div>
    <div >
      <label for="no_of_students">Number of Students</label>
      <input type="text"  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 >
      <label for="course name">Course Name</label>
      <input type="text"  name="courses[1][course_name]"/>
    </div>
    <div >
      <label for="no_of_students">Number of Students</label>
      <input type="text"  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);
    }

CodePudding user response：

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 >
      <label for="course name">Course Name</label>
      <input type="text"  name="courses[${indexValue}][course_name]"/>
    </div>
    <div >
      <label for="no_of_students">Number of Students</label>
      <input type="text"  name="courses[${indexValue}][no_of_students]"/>
    </div>`
}

//add the first course instead of using HTML directly
addCourse()

<div>
  <button type="button"  onclick="addCourse()">Add Course</button>
  <div id="course_add" >
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

You can simply try this one:

let i = 1;
function addCourse() {
  var mydiv = document.getElementById("course_add");
  mydiv.innerHTML  = `<div >
    <label for="course name">Course Name</label>
    <input type="text"  name="courses[${i}][course_name]" />
  </div>
  <div >
    <label for="no_of_students">Number of Students</label>
    <input type="text"  name="courses[${i}][no_of_students]" />
  </div>`;
  i  ;
}

<div>
  <button type="button"  onclick="addCourse()">Add Course</button>
  <div id="course_add" >
    <div >
      <label for="course name">Course Name</label>
      <input type="text"  name="courses[0][course_name]" />
    </div>
    <div >
      <label for="no_of_students">Number of Students</label>
      <input type="text"  name="courses[0][no_of_students]" />
    </div>
  </div>
</div>

CodePudding user response：

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

<input id="course_name" type="text"  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"  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.