How do i replicate or add more html form fields dynamically with javascript?

Question

I am currently stuck, i need help adding additional form inputs and labels into a html page using javascript. I am trying to get a number of segments from a user and onclick it creates the additional form fields required. If they provide 3 then it creates an additional 2 form fields with the same variables/selections. I am trying to do this with a for loop in Javascript but have not been successful.

My Html

          <h2>New Project</h2>
          <p>Please enter the information below:</p>

          <label for="project-name">Project Name </label>
          <input type="text" id = "project-name" class="form-input">

          <label for="segments">Number of Segments </label>
          <input type="number" id = "segments" min="3" class="form-input">
                            <input type = "button" value = "Add Segments" onclick = "addSegment"><br>             <!--Segment Info Start-->   
          <label for="segment">Segment Type</label>
          <select id="segment" name="segment" class="form-input">
              <option value="ramp">Ramp</option>
              <option value="dwell">Dwell</option>
              <option value="step">Step</option>
          </select>

          <label for="temp">Temperature</label>  
          <input type="number" id = "temp" class="form-input" min="30">

          <label for="time">Time</label>  
          <input type="number" id = "time" class="form-input" min="1">            <!--Segment Info End-->     
          <input type="reset" value="Reset"> 
          <input type="submit" value="Start">
       </form>

My Javascript

function addSegment(){

        var segments = document.getElementById("segments").value;

        var seg = segments-1;

        var i;

        for (i = 0, i<seg, i++){




        }


}

Thanks

Abdulah Proho · Accepted Answer · 2020-04-15 12:00:41Z

1

You can dynamicly create html elements and append them to form. You can append them on end of form of before/after some child element in form

This is how you can append them to the end of form

function addSegment(){

        var segments = document.getElementById("segments").value;

        var seg = segments-1;

        var i;

        for (i = 0, i<seg, i++){
            const label = document.createElement('label');
            label.for=`someName${i}`;
            const input = document.createElement('input');
            input.type="text" // or any other
            input.name = `someName${i}`;
            // and all other attributtes you need to set
            document.getElementById("myForm").appendChild(label)
            document.getElementById("myForm").appendChild(input)

        }
}

answered Apr 15, 2020 at 12:00

Abdulah Proho

1311 silver badge7 bronze badges

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

2 Comments

Dimitri D Over a year ago

Thanks, i will give it a go. Is there an easier way just by duplicating the existing created form?

Abdulah Proho Over a year ago

You alse had errors in for loop, it uses ";" betwen instead of ","

Collectives™ on Stack Overflow

How do i replicate or add more html form fields dynamically with javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related