javascript在表单提交时显示隐藏的div

嗨，我解决一个问题有困难。 我使用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>

---

您需要防止事件的默认行为，例如：

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

它可能适用于当前的onsubmit=“showHide（）”，但最好将事件与HTML分开

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

借

---

你的问题是什么？您想要实现什么？您需要防止提交按钮的默认行为，这是导致整个页面重新加载的原因。您需要防止默认行为并向PHP发送ajax请求以执行服务器端验证，或者需要在页面加载时移动show/hide JavaScript以启动。如果您不想刷新页面，则应使用ajax为什么不能使用JavaScript进行验证呢！
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)

<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;':''?>">