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;

}

在完成之前关于相同主题的讨论之后，以下是此

的解决方案之一

创建一个类似于在表单提交后显示隐藏div的JavaScript。

$('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'
}); 

});

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

Answer 1

使用

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

显示输出

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

Answer 2

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

在您的脚本中，您正在拼写doutput。用输出

替换它

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

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

Answer 3

删除显示：无;

并执行此代码

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

隐藏和

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

显示

Answer 4

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

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

Answer 5

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

的Javascript 为所有表单数据提供一个ID，然后编写一个javascript函数来填充所述DIV中的答案。
的Ajax 将表单发布到ajax，将响应返回给DIV
新页面请求提交后，检查是否设置了$ _POST，然后显示带有$ _POST内容的div。

Answer 6

您可以尝试使用表单元素的“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

Answer 7

如果我做得对，你不想重新加载页面。在这种情况下，您需要通过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>

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

7 个答案: