javascript在表單提交上顯示隱藏的div

Question

嗨，我無法解決我遇到的問題。 當您單擊它時，我使用javascript函數隱藏或顯示div。 在那個div中放置了一個表格，但是當我提交該表格時頁面刷新，並且因為我使用php進行錯誤處理，所以我不得不再次單擊該按鈕以查看它顯示了什么錯誤。

PHP和HTML代碼：

<a id="addproduct_button" class="blue_button create_button" href="javascript:toggle();">New product</a>
        <div id="addproduct_content" class="new_content" style="display: none;">
            <?php
                if(!empty($_POST['submit'])){
                    $product_name = $_POST['product_name'];
                    $product_price = $_POST['product_price'];
                    $vat = $_POST['vat'];
                    $error_color = "background-color: #E00000; border-color: #E00000; color: #ffffff!important;";
                    $error_description = array();
                    $error = false;

                    if(empty($product_name)){
                        array_push($error_description, 'Product name is required');
                        $product_nameErr = $error_color;
                        $error = true;
                    }
                    if(empty($product_price)){
                        array_push($error_description, 'Product price is required');
                        $product_priceErr = $error_color;
                        $error = true;
                    }
                        elseif(!is_currency($product_price)){
                            array_push($error_description, 'Product price is invalid');
                            $product_priceErr = $error_color;
                            $error = true;
                        }
                        if($vat == 0 || $vat == 100){

                        }
                        elseif($vat < 0 || $vat > 100){
                            array_push($error_description, 'Please enter a valid VAT');
                            $vatErr = $error_color;
                            $error = true;
                        }
                    if($error == false){

                    }
                }
            ?>
            <?php
                if(!empty($error_description)){
                    echo '<p style="width: 90%; font-size: 15px;" class="error_box">';
                        foreach($error_description as $error_message){
                            echo "$error_message<br/>";
                        }
                    echo '</p>';
                }
            ?>
            <form method="post" onsubmit="showHide()">
            <table>
                <tr>
                    <td>Product name:</td>
                    <td><input style="<?=$product_nameErr?>" class="small_input" type="text" placeholder="Product name" name="product_name" value="<?=$product_name?>"></td>
                </tr>
                <tr>
                    <td>Product price:</td>
                    <td><input style="<?=$product_priceErr?>" class="small_input" type="text" placeholder="Product price" name="product_price" value="<?=$product_price?>"></td>
                </tr>
                <tr>
                    <td>VAT:</td>
                    <td><input style="<?=$vatErr?>" class="small_input" type="text" placeholder="VAT" name="vat" value="<?=$vat?>"></td>
                </tr>
            </table>
            <input style="color: white!important;" class="blue_button create_button" type="submit" name="submit" value="Add">
            </form>
        </div>

我使用的Javascript函數：

function toggle() {
        var ele = document.getElementById("addproduct_content");
        var text = document.getElementById("addproduct_button");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "New product";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = "Cancel";
        }
    } 
    function showHide() {
       var div = document.getElementById("addproduct_content");
       if (div.style.display == 'none') {
         div.style.display = '';
       }
       else {
         div.style.display = 'none';
       }
    }

Answer 1

您將需要防止事件的默認行為，例如：

<form method="post" id="myForm">
    ...
</form>

和JS

function showHide(event) {
   event.preventDefault()
   var div = document.getElementById("addproduct_content");
   if (div.style.display == 'none') {
     div.style.display = '';
   }
   else {
     div.style.display = 'none';
   }
}

var form = document.getElementById('myForm')
form.addEventListener('submit', showHide)

它可能與您當前的onsubmit =“ showHide（）”設置兼容，但最好將事件與HTML分開

Answer 2

更換

<div id="addproduct_content" class="new_content" style="display: none;">

通過

<div id="addproduct_content" class="new_content" style="<?php echo $_SERVER['REQUEST_METHOD'] === 'GET'?'display: none;':''?>">