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

Question

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

My requirement is,

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

Here is my HTML code:

<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 div section.

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

1.Added a inline css tag for output div to hide it

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

and added javascript to call function during submit

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

It didn't work.

---

2.Tried with below javascript code

$('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

<div id="output">

and in stylesheet

#output{
    display:none;
}

and used below javascript code on submit

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

It didn't work.

---

1. Added a onclick function along with the form submit

and submit button code:

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

and javascript:

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

and with

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

It didn't work.

---

Please suggest a solution to do this.

Solution 1

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):

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

$('#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

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