PHP表单提交后需重新操作才显示结果的问题求助

表单提交后页面刷新，select组件回到初始状态，Consult对应的按钮区域和目标表格都被隐藏，必须重新选择选项、点击按钮才能看到结果。这是因为页面刷新后DOM状态重置，没有根据POST请求的上下文恢复之前的交互状态。

解决步骤 #

• 恢复select选中状态：PHP渲染页面时，判断是否处于Consult操作的上下文，给对应的option添加selected属性。
• 自动显示按钮区域：页面加载时自动执行一次状态判断函数，根据select的选中状态显示/隐藏按钮区域。
• 记录并恢复表格状态：给两个表单添加隐藏字段，标记当前是哪个表格的提交；PHP根据该字段在页面加载时自动显示对应的表格。
• 修正JS表格切换逻辑：原代码中showTable1和showTable2的显示逻辑搞反了，同步修正。

修改后的PHP脚本 #

<div id="main">
    <?php                                   
        $area = $_POST['area'] ?? '';
        // 记录当前提交的表格类型，默认空
        $tableType = $_POST['table_type'] ?? '';
        
        $data = [];
        $result = '';
        if (!empty($area)) {
            $url = "http://worldtimeapi.org/api/timezone/$area";  
            $ch = curl_init($url);
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            $result = curl_exec($ch);
            curl_close($ch);
            $data = json_decode($result, true) ?? [];       
        }
    ?>    

    <div class="select">
        <select id="action-select" onchange="displayDiv('hide-buttons', this)">
            <option value="0" <?php echo empty($area) ? 'selected' : ''; ?>>Select an action</option> 
            <option value="1" <?php echo ($area && $tableType !== 'time' && $tableType !== 'area') ? 'selected' : ''; ?>>Create</option> 
            <option value="2" <?php echo (!empty($area) && ($tableType === 'time' || $tableType === 'area')) ? 'selected' : ''; ?>>Consult</option>   
        </select>
    </div> 

    <div id="hide-buttons" style="display:<?php echo (!empty($area) && ($tableType === 'time' || $tableType === 'area')) ? 'block' : 'none'; ?>">
        <div class="col-md-8">
                <button id="button1" onclick="showTable1()">Time</button>
                <button id="button2" onclick="showTable2()">Area</button>  
            </div>
        </div>

        <div id="table1" style="display:<?php echo $tableType === 'area' ? 'block' : 'none'; ?>"> 
            <form method="POST">
                <input type="hidden" name="table_type" value="area">
                <label for="area">Insert area:</label>
                <input type="text" id="area" name="area" value="<?php echo htmlspecialchars($area); ?>"> 
                <input class="button3" type="submit"> 
            </form>
            
            <?php 
            if (empty($area)) {
                    echo "<p class='empty-message'>Insert an area</p>";       
                ?>
                    <tr></tr>
                    <td></td>
                        
                <?php } else if (preg_match('/error/',$result)){ 
                    echo "<p class='invalid-message'>Invalid area</p>";
                ?>
                    <tr></tr>
                    <td></td>
                    
                <?php } else { 
                    echo "<p class='valid-message'>Valid area</p>";                   
                ?>   
        
            <table id="area-value">
                <tr>
                    <th>Area</th>
                </tr>
                    
                <tr>
                    <td><?php echo $data["timezone"] ?? ''; ?></td>
                </tr>
            </table>
            <?php } ?>
        </div>   

        <div id="table2" style="display:<?php echo $tableType === 'time' ? 'block' : 'none'; ?>"> 
            <form method="POST">
                <input type="hidden" name="table_type" value="time">
                <label for="area">Insert time:</label>
                <input type="text" id="area" name="area" value="<?php echo htmlspecialchars($area); ?>"> 
                <input class="button3" type="submit"> 
            </form>

            <?php 
            if (empty($area)) {
                    echo "<p class='empty-message'>Insert an area</p>";       
                ?>
                    <tr></tr>
                    <td></td>
                        
                <?php } else if (preg_match('/error/',$result)){ 
                    echo "<p class='invalid-message'>Invalid area</p>";
                ?>
                    <tr></tr>
                    <td></td>
                    
                <?php } else { 
                    echo "<p class='valid-message'>Valid area</p>";                   
                ?>   

            <table id="time-value">
                <tr>
                    <th>Time</th>
                </tr>
                    
                <tr>
                    <td><?php echo $data["datetime"] ?? ''; ?></td>
                </tr>
            </table>
            <?php } ?>
        </div>

</div>

修改后的JavaScript代码 #

// 页面加载时自动执行，恢复交互状态
window.onload = function() {
    const selectElement = document.getElementById('action-select');
    displayDiv('hide-buttons', selectElement);
};

function displayDiv(id, elementValue) {
    document.getElementById(id).style.display = elementValue.value == 2 ? 'block' : 'none';
}

// 修正表格切换逻辑：按钮对应正确的表格
function showTable1() {
    document.getElementById("table2").style.display = "block";
    document.getElementById("table1").style.display = "none";
}

function showTable2() {
    document.getElementById("table2").style.display = "none";
    document.getElementById("table1").style.display = "block";
}

内容的提问来源于stack exchange，提问作者cyberphantom