Create form elements with dynamic names in 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);
    }

Nick Vu · Accepted Answer · 2022-09-20 08:26:19Z

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>

edited Sep 20, 2022 at 8:26

answered Sep 20, 2022 at 7:20

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mage 456 Over a year ago

I tried this and it works. Problem is when I click the button to add new course, the old input datas for previous courses get deleted. Like I input data for the first course, then click the button to add new course, the previous data vanishes from the form.

Nick Vu Over a year ago

hi @mage456, I modified my answer to use insertAdjacentHTML instead. All your values will be there after appending new courses :D

Peleg Haham · Accepted Answer · 2022-09-20 07:21:42Z

0

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

answered Sep 20, 2022 at 7:21

Peleg Haham

1015 bronze badges

Comments

DCodeMania · Accepted Answer · 2022-09-20 07:23:20Z

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>

Arbin Shrestha · Accepted Answer · 2022-09-20 07:37:10Z

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.

Collectives™ on Stack Overflow

Create form elements with dynamic names in Javascript?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related