javascript - 在 html 表单提交后显示隐藏的 div 以显示输出

Question

我有一个 html 表单来收集姓名和地点，在用户提交表单后，输出将使用 PHP echo 显示在页面底部

我的要求是，

hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.

这是我的 HTML 代码:

<div class="main">
    <form id="main" name="main" action="#text" method="post">
        <div class="input">
            <div id="name">
                <div class="block">
                    <div class="input-quest">Your Name</div>
                    <div class="input-resp"><span><input  class="textbox" id="nm" name="nm" type="text"  value="" /></span> 
                    </div>
                </div>
            </div>
            <div id="place">
                <div class="block">
                    <div class="input-quest">Your Place</div>
                    <div class="input-resp"><span><input  class="textbox" id="pl" name="pl" type="text" value="" /></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit">
            <input id="generate" type="submit" name="script" value="generate" />
            <input type="submit" id="clear" name="clear" value="clear" />
        </div>
    </form>
    <div class="output">
        <?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
    </div>
</div>

它在 output div 部分包含 PHP 回显代码。

我已经在前面的问题中搜索了解决方案，并尝试了下面提到的方法:

1.为output div添加了一个内联CSS标签来隐藏它

<div id="output" style="display: none;">
    <!-- echo php here -->
</div>

并在提交过程中添加了 JavaScript 来调用函数

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

没用。

---

2.尝试使用以下 JavaScript 代码

$('main').submit(function(e){
    $('#output').show();
    e.preventDefault();
});

没用。

---

3.删除了隐藏输出 div 的内联 CSS，并将其添加到我的 CSS 样式表中

<div id="output">

在样式表中

#output{
    display:none;
}

并在提交时使用下面的 JavaScript 代码

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

没用。

---

1. 添加了 onclick 函数以及表单提交

并提交按钮代码:

<input  id="generate" type="submit"  name="script" value="generate" onclick="showoutput()"/>

和 JavaScript:

showoutput(){
    $('#output').slideDown("fast");
}

与

showoutput(){
    $('#output').show();  
}

没用。

---

请提出解决方案。

Answer 1

我完全不确定您为什么需要为此使用 js/css。只需检查变量是否已发布，如果已发布，则回显它们(您必须将表单操作设置为指向同一页面):

<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
  <div class="output">
    Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
  </div>
<?php } ?>

如果您只想在div.output 中显示名称和地点，而不实际提交表单，您可以这样做:

$('#main').submit(function(e) {
  e.preventDefault(); // prevent form from being submitted
  $('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});

Here's a fiddle