Как добавить структуру из полей не более 5 раз?

Question

[Александр Валутин]

Всем привет, прошу помощи, я в JS не смыслю, понадобилось решить такую задачу: Мне нужно, при нажатии на кнопку "Добавить", добавить еще одну строку с данными полями. Пример:
Регистрация:
Признак
записи:
Дата
регистрации:
Номер
обращения:
Дата
обращения:
Комментарий:
ФИО
Это одна строка. Нажимаю "Добавить" и ниже появляется точно такая же строка, но добавить можно не более 5 строк

<div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <H2>Регистрация</H2>
                    </div>
                </div>
             </div>

        <div class="row">
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Признак<br>записи: </label>
                    <select name="sign_record" class="form-control">
                        <option value="main">Новая</option>
                        <option value="additional">Изменить</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>регистрации:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date"
                                value="">
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>Номер<br/> обращения:</label>
                    <input type="text" class="form-control input-sm" name="invoice_no_ext"
                           value="">
                </div>
            </div>

            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>обращения:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date"
                                value="">
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>Комментарий:</label>
                    <input type="text" class="form-control input-sm" name="ext_sum_without_vat"
                           >
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>ФИО</label>
                    <input type="text" class="form-control input-sm" name="ext_vat"
                          >
                </div>
            </div>

        </div>

            <div class="row">
                <div class="col-sm-11"></div>
                <div class="col-sm-1">
                    <input id='submit' class='btn btn-primary' type='submit' value="Добавить">
                </div>
            </div>

Помогите, пожалуйста

Answer 1

[hzzzzl]

считать добавленные строки отдельно, добавлять строки отдельно

Answer 2

[Александр Валутин]

Клево) Прямо то, что нужно) а как это будет выглядеть в .tpl файле? я делаю так, но это явно неправильно:

<div id="main"></div>

        <button id="btn">добавить</button>

        <script>
            {literal}
            rows = 0
            addRow()

            btn.addEventListener('click', addRow)


            function addRow() {
                if (rows < 5) {
                    rows++
                    main.innerHTML += _makeRow()
                } else {
                    alert('ХВАТИТ')
                }
            }

            function _makeRow() {
                return ` <div class="row">
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Признак<br>записи: </label>
                    <select name="sign_record" class="form-control">
                        <option value="main">Новая</option>
                        <option value="additional">Изменить</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>регистрации:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date"
                                value="">
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>Номер<br/> обращения:</label>
                    <input type="text" class="form-control input-sm" name="invoice_no_ext"
                           value="">
                </div>
            </div>

            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>обращения:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date"
                                value="">
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>Комментарий:</label>
                    <input type="text" class="form-control input-sm" name="ext_sum_without_vat"
                           >
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label>ФИО</label>
                    <input type="text" class="form-control input-sm" name="ext_vat"
                          >
                </div>
            </div>

        </div>

                }
        {/literal}
            </script>

У меня происходит перезагрузка и выход со страницы

Comments

[Александр Валутин]

Просто не могу понять то, как это вставить в файл .tpl

[hzzzzl]

Александр Валутин, это не фейсбук, тут не видят новые коменты, если не отвечаешь напрямик на коммент :)

не в курсе про темплейтинг если честно, но если это делать на яваскрипте (а иначе в браузере никак не добавить этот ряд, или js или запрашивать новую страницу у php), то придется скрипт подключить или отдельно файлом или как-то так, да