Как отправить данные из динамически созданных полей на сервер?

Question

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

Добрый день, я создаю div определенное количество раз. Помогите отправить эти данные на сервер, чтобы потом, с помощью PHP, сохранить данные в БАЗУ.

div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <H2>Исправительная форма</H2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="main"></div>
                <button type="button" id="btn">Добавить</button>
                <button type="button" id="del_btn">Удалить</button>

{literal}
                    <script type="text/javascript">
                        rows = 0;
                        addRow();
                        btn.addEventListener('click', addRow);
                        del_btn.addEventListener('click', deleteRow);
                        function deleteRow() {
                            if (rows != 1 && rows <= 5) {
                                rows--;
                                divElement = document.getElementById('divsf');
                                divElement.parentNode.removeChild(divElement);
                            }
                        }
                        function addRow() {
                            if (rows < 5) {
                                rows++;
                                main.innerHTML += _makeRow();
                            } else {
                                alert('ХВАТИТ');
                            }
                        }
                        function _makeRow() {
                            return `
              <div class="row" id="divsf">
               <div class="col-sm-2">
                <div class="form-group">
                    <label>Признак<br>записи: </label>
                    <select name="sign_record" class="form-control">
                        <option value="main_fix">Основаная</option>
                        <option value="additional_fix">Допполнительная</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_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Номер<br/> исправления:</label>
                    <input type="text" class="form-control input-sm" name="number_fix">
                </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="correction_date_fix" type="text"  name="correction_date_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Сумма:</label>
                    <input type="text" class="form-control input-sm" name="sum_fix">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Услуга</label>
                    <input type="text" class="form-control input-sm" name="service_fix">
                </div>
            </div>
        </div>
`}
                    </script>
                {/literal}
            </div>

Java Script - код написан в tpl-шаблоне

Comments

[Модератор]

Для комментирования ответа жмите линк "Комментировать" под ответом
Не нужно писать комментарий в форме для ответа
Оповещения о такой реплике не поступит автору ответа

Не нужно засорять секцию ответов "спасибовсем", "решено" и тп

Answer 1

[Daria Motorina]

1) Определяете действие, по которому делаете "срез" данных - нажатие кнопки, потеря фокуса элемента и т.п.
2) На js находите эти элементы, сохраняете их контент в переменную
3) Пишете на js обработчик события из п.1, внутри него через ajax post запрос, которым на сервер отправляете данные из п.2. В ajax пишете обработчик отдельно на успешный ответ (http status 200) и на ответ с ошибкой.
4) На сервере принимаете эти данные, через PDO или ORM (если есть) сохраняете в базу.
5) Если все сохранилось, отправлете ответ на фронт со статусом 200, если нет, то на бекенде анализируете ошибку и отправляете на фронт 500 и текст ошибки

Answer 2

[ThunderCat]

Во первых покоцан первый див
Во вторых - добавьте тег формы, пока это просто элементы внутри хтмл, что как минимум не валидно, и кроме того не удобно обрабатывать.
В третьих формат имени - добавьте в конце имени инпутов '[]'

<input type="text" class="form-control input-sm" name="sum_fix[]">

Дальше все стандартно, субмит формы, на сервере получаете массив полей, сохраняете. Можно прикрутить аякс и отправлять без перезагрузки, по событию субмит на форме.

Answer 3

[Danil Sapegin]

меняете все имена инпутов по такому принципу
было:

<input type="text" class="form-control input-sm" name="number_fix">

стало:

<input type="text" class="form-control input-sm" name="number_fix[]">

и ловите на сервере массив, вместо одного значения и дальше уже что надо сохраняете