javascript - 隐藏的div瞬间显示和消失

Question

我有一个包含两个 div 元素的表单，请参见下面的代码:

• DIV1 id="hide_onclick":点击提交按钮时应该隐藏
• DIV2 id="show_onclick":应在提交按钮按下时显示点击

但是，当 Javascript 在 onClick 上执行时，DIV2 会快速显示查询结果并隐藏起来。如果我将输入 type="submit" 更改为 type="button"，DIV2 会正确显示，但我无法获得查询结果。我不知道如何解决这个问题。

<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
    <div class="row" style="padding-bottom:10px;">
        <div class="col-sm-4">
            Vehicle Registration
        </div>
        <div class="col-sm-8">
            <input type="text" class="form-control"  name="vehiclereg" value="<?php echo $vehiclereg;?>" />
        </div>
    </div>
    <!--Visible div to hide on button click -->
    <div id="hide_onclick">
        <div class="row" style="padding-bottom:10px;">
            <div class="form-group">
                <div class="col-xs-12">
                    <input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
                </div>
            </div>
        </div>
    </div>
    <!--Hidden div to display after the onclick event from the button above and displays the records-->
    <div id="show_onclick" style="display:none;">
        Upadates from database
    </div>
</form>

<!--Javascript to hide the first div and display the second div -->
<script>
    function show_hideDiv() {
       document.getElementById("hide_onclick").style.display = "none";
       document.getElementById("hide_onclick").disabled = true; 
       document.getElementById("show_onclick").style.display = "block";
    }
</script>

Answer 1

这是因为当您提交表单时，它会将页面重定向到 action 属性。在你的例子中，因为你没有，它会刷新页面。

因此，您正在将 div2 更改为可见，但随后页面刷新并返回到初始状态...