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

Display a hidden div after a html form submit to show output

提问by acr

I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using php echo

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

My requirement is,

我的要求是，

hide the output divbefore the form submit and after user enter data and submit, I have to make output divvisible to display form output using php echo

隐藏output div表单提交之前和用户输入数据并提交之后，我必须output div使用 php echo使显示表单输出可见

Here is my HTML code:

这是我的 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>

It contain the PHP echo codes at output divsection.

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

I have searched for solution in previous questions and tried below methods mentioned there

我在之前的问题中搜索了解决方案并尝试了以下提到的方法

1.Added a inline css tag for output divto hide it

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

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

and added javascript to call function during submit

并添加了 javascript 以在提交期间调用函数

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

It didn't work.

它没有用。

---

---

2.Tried with below javascript code

2.尝试使用下面的javascript代码

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

It didn't work.

它没有用。

---

---

3.Removed inline css for output div to hide and added the same to my css stylesheet

3. 删除了输出 div 的内联 css 以隐藏并将相同的内容添加到我的 css 样式表中

<div id="output">

and in stylesheet

并在样式表中

#output{
    display:none;
}

and used below javascript code on submit

并在提交时在 javascript 代码下方使用

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

It didn't work.

它没有用。

---

---

1. Added a onclick function along with the form submit

1. 添加了一个 onclick 功能以及表单提交

and submit button code:

并提交按钮代码：

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

and javascript:

和 javascript：

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

and with

与

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

It didn't work.

它没有用。

---

---

Please suggest a solution to do this.

请提出一个解决方案来做到这一点。

采纳答案by billyonecan

I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):

我不知道为什么你需要为此使用 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 } ?>

If you just want to display the name and place in div.output, without actually submitting the form, you could do:

如果您只想在 中显示名称和地点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

这是一把小提琴

回答by Guillaume Lehezee

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

回答by Jacques ジャック

Create a separate page to process your formusing javascript/jquery (ajax), and have it return the info you want, hide the formand show the .outputdiv.

创建一个单独的页面来处理您form使用的 javascript/jquery (ajax)，并让它返回您想要的信息，隐藏form并显示.outputdiv。

PHP Page:

PHP页面：

<?php 

    $name = $_POST['nm']; 

    $place = $_POST['pl']; 

    echo "Hello, I am ".$name." and I am from ". $place; 
?>

The javascript/jquery would catch that as responseTextand then use innerHTMLon your .outputdiv to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output

javascript/jquery 会捕获它responseText，然后innerHTML在你的.outputdiv 上使用它来放置responseText. 然后，您将使用 JS/Jquery 隐藏表单并显示.output

回答by Optox

You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.

实际上，您可以完全使用 php 完成此操作。我会使用的最简单的方法是使用给定值进行隐藏输入。用户提交表单后，该变量将存在，您可以在 php.ini 中获取它。

First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.

首先，您需要将整个页面更改为 .php，并回显您的所有 html。然后在表单中，将动作设置为页面的名称，以便它将变量发送给自己，然后您可以在同一页面上处理它们。

add this to the html:

将此添加到html：

<input type='hidden' name='display' value='display' />

In your php, add:

在你的 php 中，添加：

if (isset($_POST['display']){
     echo "make the div here";
}else{
     //don't show the div
}