Question

嗨，我遇到了解决问题的麻烦。我点击它时使用javascript函数隐藏或显示div。在div中放置一个表单，但是当我提交该表单时页面刷新并因为我使用php进行错误处理我必须再次单击该按钮以查看它显示的错误。

PHP＆amp; 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 =＆＃34; showHide（）＆＃34;，但最好将事件与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;':''?>">

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

2 个答案: