php - 在表单提交操作后显示隐藏的 DIV

Question

我试图在提交表单数据后显示隐藏的 div

下面是我的表单 html，其中输入部分将有一个表单来输入数据，提交表单后我必须显示隐藏的输出部分并在那里显示结果

html代码:

<div id="input">


----- some form datas here ----

<div id="submit">
        <input type="submit"  id="generate" name="script" value="generate" />

    </div>

</div>


<div id="output" style="display: none;">


--- php echo from above form------

</div>


</form>

CSS:

#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}


#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}

在经历了之前关于相同主题的一些讨论之后，下面是针对此问题的已回答解决方案之一

创建一个 JavaScript，比如在提交表单后显示隐藏的 div。

$('form').submit(function(){
    $('#output').show();  

});

或

$('form').submit(function(e){
    $('#output').hide();  
    e.preventDefault();
    // Or with: return false;        
});

但这两种解决方案都不适合我。第二种能够显示隐藏的 div output 但它不显示实际的表单数据。

如何正确显示？我需要在提交表单后显示这个 (type="submit")

更新:

1. 删除了内联 css 以隐藏 div

2. 在样式表中添加隐藏div的css功能

   #output{
   display:none;
   width:800px;
   margin: auto;
   border-width:1px;
   border-style:solid;
   border-color:#ddd;
   }
   

3. 在 jquery 下面添加以在表单提交时显示 div

   $('form').submit(function(){
   $('#output').css({
     'display' : 'block'
   }); 
   
   });
   

我仍然无法实现结果。这里有什么线索吗？

Answer 1

使用

<form id="form" action="">
</form>

显示输出

 $(document).ready(function() {
        $('#output').hide();
        $('#form').submit(function(){
                 $('#output').show();   
        });
    });