在html表單提交后顯示隱藏的div以顯示輸出

Question

我有一個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>

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

這是一個小提琴

Answer 2

<?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 } ?>

Answer 3

使用javascript / jquery（ajax）創建一個單獨的頁面來處理form ，並讓它返回您想要的信息，隱藏form並顯示.output div。

PHP頁面：

<?php 

    $name = $_POST['nm']; 

    $place = $_POST['pl']; 

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

javascript / jquery會將其作為responseText捕獲，然后在.output div上使用innerHTML來放置該responseText 。 然后，您可以使用JS / Jquery隱藏表單並顯示.output

Answer 4

你可以用php完全實現這一點。 我將使用的最簡單方法是使用給定值創建隱藏輸入。 一旦用戶提交表單，該變量將存在，您可以在php中獲取它。

首先，您需要將整個頁面更改為.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
}