在表单提交操作后显示隐藏的 DIV - Display a hidden DIV after a form submit action

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

下面是我的表单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的JavaScript，以便在表单提交后显示隐藏的div。

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

或

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

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

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

更新：

删除了内联 css 以隐藏div

在样式表中添加了 css 函数以隐藏div

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

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

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

我仍然无法达到结果。这里有任何线索吗？

使用

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

显示输出

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

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

在您的脚本中，您正在拼写输出。将其替换为输出

并显示使用 .css(( 函数并定义display: block !important;因为您已以内联样式显示它，因此要覆盖它，您需要设置！important。

或者，在样式表中定义display: none;而不是以内联样式使用，并在不设置！important 的情况下完成其余工作

删除显示：无;

并执行此代码

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

隐藏和

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

以显示

您可以使用.hide()和.show()，而不是通过.css()编辑CSS属性。

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

如果你想在DIV中显示结果，有很多方法可以做到这一点。

爪哇语给你所有的表单数据一个ID，然后编写一个javascript函数来填写所述DIV中的答案。
阿贾克斯将您的表单发布到 ajax，将响应返回到您的 DIV
新页面请求提交后，检查是否设置了 $_POST，然后显示包含 $_POST 内容的div。

如果我

做对了，你不想重新加载页面。在这种情况下，您需要通过 ajax 调用发送表单数据。然后，您可以显示响应和隐藏的div。

.CSS

#output {
    display:none;
}

jQuery

$(document).ready(function(){
    $('form').submit(function(e){
        // Prevent the default submit
        e.preventDefault();
        // Collect the data from the form
        var formData =  $('form').serialize();
        //Send the from
        $.ajax({
            type: "POST",
            url: "generator.php",
            data: formData,
            success: function(msg){
                // Insert the response into the div
                $('#ajaxResponse').html(msg);
                // Show the hidden output div
                $('#output').slideDown();
            }
        });    
    });
});

.HTML

<div id="output">
    --- php echo from above form------
    <div id="ajaxResponse"></div>
</div>

您可以尝试使用表单元素的"action"属性，也可以在提交后立即在表单元素上尝试jquery serializeArray方法。

<form>
    <input type="text" name="giveNameHere" />
    <input type="submit"  id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
    Output Content
</div>
$('form').submit(function () {
    $('#output').show();
    console.log($(this).serializeArray());
    return false;
});

请看这个jsfiddle