Как мне динамически реплицировать или добавить больше html полей формы с javascript? - PullRequest
0 голосов
/ 15 апреля 2020

В данный момент я застрял, мне нужна помощь, чтобы добавить дополнительные поля ввода и метки на страницу html, используя javascript. Я пытаюсь получить от пользователя несколько сегментов, и по щелчку мыши он создает дополнительные обязательные поля формы. Если они предоставляют 3, то это создает дополнительные 2 поля формы с теми же переменными / выборами. Я пытаюсь сделать это с помощью для l oop в Javascript, но безуспешно.

Мой 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>

Мой Javascript

function addSegment(){

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

        var seg = segments-1;

        var i;

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




        }


}

Спасибо

1 Ответ

1 голос
/ 15 апреля 2020

Вы можете динамически создавать html элементы и добавлять их в форму. Вы можете добавить их в конец формы до / после некоторого дочернего элемента в форме

Таким образом вы можете добавить их в конец формы

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)

        }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...