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;        
});

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

我怎样才能正确显示它？我需要在提交表单后显示这个(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'
}); 

});

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

score 3 · Accepted Answer

利用

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

显示输出

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

score 1 · Accepted Answer

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

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

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

或者，display: none;在样式表中定义而不是在内联样式中使用，其余部分不设置 !important

score 0 · Accepted Answer

移除显示：无；

并执行此代码

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

隐藏和

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

以显示

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以使用.hide()and.show()而不是通过.css().

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

score 0 · Accepted Answer

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

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

7 回答 7

Related

Reference