提交后保留輸入字段並在同一頁面顯示響應

Question

我有一個 select div，有一些選項。 當我選擇 select 選項 1 時，它會顯示兩個按鈕，對於每個按鈕，當我單擊時，它會返回兩個表（按鈕一返回表一，按鈕二返回表二）。 這工作正常，但我在 php 驗證輸入數據后顯示結果時遇到了一些問題。 我所擁有的是：

我的 php 腳本：

<div id="main">
        <?php                                   
            $area = $_POST['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 onchange="displayDiv('hide-buttons', this)">
            <option value="0">Select an action</option> 
            <option value="1">Create</option> 
            <option value="2">Consult</option>   
        </select>
    </div> 

    <div id="hide-buttons" style="display: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:none"> 
            <form method="POST">
                <label for="area">Insert area:</label>
                <input type="text" id="area" name="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>
        </div>   

        <div id="table2" style="display:none"> 
            <form method="POST">
                <label for="area">Insert time:</label>
                <input type="text" id="area" name="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>
        </div>

</div>

和 JavaScript：

    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";
  }

正如您可以測試的那樣，我的問題是當我提交輸入時，它會發出請求並檢索響應，但我必須選擇 select 選項並再次單擊按鈕才能看到響應。 我對此很陌生，我嘗試進行更改，但情況越來越糟。 我該怎么做？

Answer 1

你可以在加載時做一個function來檢查響應div是否有變化，然后你可以直接將結果顯示在div中，或者觸發按鈕點擊，怎么做？

我首先假設您安裝了 jQuery，因為這樣創建一個事件比在普通 javascript 中創建事件更容易（如果您開始使用 jQuery 也很有幫助），所以如果您有 jQuery，您可以這樣做：

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";
}

$(document).ready(function(){
    checkForResponse(); // calls this function when loading the screen
});


function checkForResponse(){
    //Checks if table1 child p element has valid-message then shows the table1
    if($('#table1 p').hasClass('valid-message')){
        showTable1();
    }

    //Checks if table2 child p element has valid-message then shows the table2
    if($('#table2 p').hasClass('valid-message')){
        showTable2();
    }
}

這可以在以后重構，但我認為這是一個讓你繼續前進的想法，祝你好運。