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更改为可见，但页面刷新并返回初始状态...

Answer 2

type =“submit”和type =“button”之间存在基本区别。 type =“submit”将提交您的表单并重新加载页面。这就是为什么你的div2出现，直到页面加载回来。另一方面type =“button”不提交页面（页面不重新加载），它只调用你的show_hidediv（）函数。我的建议是在这种情况下使用ajax，你不想重新加载页面但想要从数据库中检索数据。

Answer 3

解释如同LcSalazar所说。我发现的解决方案（或者可能是黑客）正在使用隐藏的div中的显示代码。

请记住，您应该保留所有其余代码。

  <!--Hidden div to display after the onclick event from the button above and displays the records-->
  <div id="show_onclick" style="display:none;">
  <!-- keeps the div visible after the page refresh -->
  <script>$('#show_onclick').css('display','block');</script>
  <!-- Updates from database -->
  </div>

隐藏的div显示并在瞬间消失

3 个答案: