Как заставить кнопку оставаться в ряд в php / json?

Question

Как видно из названия, я не могу заставить кнопку оставаться в строке после сохранения формы. Я могу добавить кнопку в ряд через JavaScript.

У меня есть код php, как показано ниже. Приведенный ниже код html / php работает таким образом, что при добавлении строк мы можем выбирать дату из каждой строки и сохранять ее. Теперь я пытаюсь добавить кнопку в ряд. Вот сценарий (полностью JS) , который я использовал для добавления кнопка (имеющая любой текст) в строке.

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

html / php код:

<?php
$output = array();     

Постановка проблемы:

Проблема, на которую я имею право Теперь я могу добавить столько строк, сколько мы хотим, но кнопка не остается после сохранения формы. На странице остаются только строки, содержащие даты.

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

Редактировать 1:

В JSON он равен нулю {"row_delete": null} , поэтому причина, по которой кнопка не не оставаться в каждом ряду после сохранения формы.

Answer 1

Кнопка не отображалась, потому что вы не получите HTML значение элемента кнопки в запросе php. Чтобы получить значение кнопки, вам нужно будет использовать дополнительную скрытую переменную со значением

<?php

            if (!empty($_POST)) {
                $output = array();     

                if (!empty($_POST['house_sitting_date'])) {
                    $output['house_sitting_date'] = $_POST['house_sitting_date'];
                }

                if (!empty($_POST['row_delete'])) {
                    $output['row_delete'] = $_POST['row_delete'];
                }

                $fp = fopen('ptp-ess_landing_house.json', 'w');
                fwrite($fp, json_encode($output));
                fclose($fp);
            }

            $data = [];
            if(file_exists('ptp-ess_landing_house.json')) {
                $data = json_decode(file_get_contents('ptp-ess_landing_house.json'));
            }

            ?><form method="post">
                <!-- Add New Row Button START -->
                <div class="plus-minus-button" style="text-align:center;">    
                    <button type="button" id="addRow" onclick="rowAdd()">+</button>
                </div>

                <!-- Add New Row Button END -->
                <div id="rows" style="display:flex; justify-content: center;"> <!-- Big div START -->

                    <!-- This is what I have tried to add a button (START) -->  
                    <!-- Remove Button START -->
                    <div class="rows-delete" style="text-align:center;">
                        <h4 style="text-align:center;">Delete Rows</h4><?php
                        if (empty($data->row_delete)) {
                            ?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
                                <button type="button" />Remove</button>
                                <input type="hidden" name="row_delete[]" value="1" />
                            </div><?php
                        }
                        else {
                            foreach ($data->row_delete as $row_delete){
                                ?><div class="row-delete" style="margin-right:30px; margin-top:20px;">
                                    <button type="button">Remove</button>
                                    <input type="hidden" name="row_delete[]" value="<?php echo $row_delete;?>" />
                                </div><?php
                            }
                        }
                    ?></div>  

                    <!-- Remove Button END -->
                    <!-- This is what I have tried to add a button (END) -->    

                    <!-- Sitting Date START -->
                    <div class="sitting-days" style="text-align:center;">
                        <h4 style="text-align:center;">Select Date</h4><?php 
                        if (empty($data->house_sitting_date)) {
                            ?><!-- Select Date START -->
                            <div class="select-date" style="margin-right:30px; margin-top:20px;">
                                <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
                            </div><?php 
                        }
                        else {
                            foreach ($data->house_sitting_date as $date){ ?>
                                <!-- Select Date START -->
                                <div class="select-date" style="margin-right:30px; margin-top:20px;">
                                    <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="<?php if($date) {echo $date;}?>">
                                </div><?php
                            }
                        }
                    ?></div>  
                    <!-- Sitting Date END -->


                </div>
                <!-- Big div END -->

                <hr />
                <div style="text-align:center;">
                    <input type="submit" value="submit" />
                </div>

            </form>

            <script>
                function rowAdd(event) {
                        document.getElementById("rows")
                          .insertAdjacentHTML('beforeend', newRow());
                    }
                    function newRow() {
                var row_delete = document.querySelectorAll('input[name="row_delete[]"]');
                var row_delete_length = row_delete.length + 1;

                return `<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
                        <div class="row-delete" style="margin-right:30px;">
                             <button type="button">Remove</button>
                             <input type="hidden" name="row_delete[]" value="` + row_delete_length + `" />
                        </div>
                        <div class="select-date" style="margin-right:30px;">
                             <input type="date" class="house-sitting-date" name="house_sitting_date[]" value="">
                        </div>
                </div>`;
            }
            </script>

Примечание: удаление необработанного кода не предусмотрено, я думаю, вы будете достаточно способны сделать это