4

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

我的要求是，

隐藏output div表单提交之前和用户输入数据并提交之后，我必须output div使用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>

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

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

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

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

它没有用。

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

4

4 回答 4

4

我不确定你为什么需要为此使用 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());
});

这是一个小提琴

于 2013-08-02T14:52:23.933 回答
1 
<?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 } ?>
于 2013-08-02T14:48:21.520 回答
0

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

PHP页面：

<?php 

    $name = $_POST['nm']; 

    $place = $_POST['pl']; 

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

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

于 2013-08-02T15:01:11.203 回答
-1

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

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


将此添加到html：

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

在您的 php 中，添加：

if (isset($_POST['display']){
     echo "make the div here";
}else{
     //don't show the div
}
于 2013-08-02T14:51:44.143 回答