如何讓按鈕在 php/json 中保持連續？

Question

正如標題所暗示的那樣，我無法在保存表單后使按鈕保持連續狀態。 我可以通過 JavaScript 連續添加一個按鈕。

我有一個 php 代碼，如下所示。 下面的 html/php 代碼的工作方式是在添加行時，我們可以從每一行中選擇日期並保存它。 現在我正在嘗試連續添加一個按鈕。 這是我用來連續添加按鈕（具有任何文本）的腳本（完全是 JS） 。

我現在在添加行時遇到的問題是該按鈕確實出現在每一行中，但是在保存表單並返回后，該按鈕從每一行中消失，可能是因為 JSON 中沒有保存任何內容。

html/php 代碼：

<?php
$output = array();     

問題陳述：

我現在遇到的問題是，我可以根據需要添加任意數量的行，但按鈕在保存表單后不會保留。 只有包含日期​​的行留在網頁上。

我想知道我需要在上面的 php/javascript 代碼中進行哪些更改，以便按鈕在保存表單后保留。 當我檢查 JSON 時，那里沒有保存任何內容，所以這可能是保存表單后按鈕不保留的原因。

編輯1：

在 JSON 中，它是 null {"row_delete":null}所以這就是為什么在保存表單后按鈕不會保留在每一行中的原因。

Answer 1

按鈕未顯示，因為您不會在 php 請求中獲得 HTML 按鈕元素值。 要獲取按鈕值，您必須使用額外的隱藏變量值

<?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>

注意：未提供刪除原始代碼，我認為您有能力做到這一點