隐藏的div显示并在一瞬间消失 [英] Hidden div shows and disappears in a flash

问题描述

• DIV1 id =hide_onclick：点击提交按钮时应隐藏


• DIV2 id =show_onclick提交按钮是
  点击
  

然而，当Javascript执行 onClick ，DIV2在闪存中显示查询结果并隐藏回去。如果我将输入 type =submit更改为 type =button，DIV2会正常显示，但我不会能够得到查询结果。
我无法弄清楚如何解决这个问题。

 <！ - 表单使用车辆注册拉记录从数据库 - > 
< form class =form-horizo​​ntalmethod =post> 
< div class =rowstyle =padding-bottom：10px;> 
< div class =col-sm-4> 
车辆注册
< / div> 
< div class =col-sm-8> 
< input type =textclass =form-controlname =vehicleregvalue =<？php echo $ vehiclereg;？> /> 
< / div> 
< / div> 
<！ - 可见div隐藏按钮点击 - > 
< div id =hide_onclick> 
< div class =rowstyle =padding-bottom：10px;> 
< div class =form-group> 
< div class =col-xs-12> 
< input type =submitname =retrieve_vehiclevalue =点击检索车辆onclick =show_hideDiv（）; /> 
< / div> 
< / div> 
< / div> 
< / div> 
 <！ - 隐藏div显示在上述按钮的onclick事件之后并显示记录 - > 
< div id =show_onclickstyle =display：none;> 
从数据库
< / div> 
< / form> 
 
 <！ -  Javascript隐藏第一个div并显示第二个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> 
  

解决方案

type =submit并键入=按钮。 type =submit将提交您的表单并重新加载页面。这就是为什么你的div2显示直到页面加载回来。
另一方面，type =button不提交页面（页面不重载），它只调用你的show_hidediv（）函数。我的建议是在这种情况下使用ajax，您不想重新加载页面，但想从数据库中检索数据。

I have a form with two div elements see code below:

• DIV1 id="hide_onclick": should hide when a submit button is clicked
• DIV2 id="show_onclick": should display when a submit button is clicked

However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results. I could not figure out how to fix this.

<!--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>

解决方案

There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back. On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.

这篇关于隐藏的div显示并在一瞬间消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！