CODEWITHSUNDEEP
javascriptphphtmljqueryjquery-events
acr
acr

Reputation: 1746

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

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.

Upvotes: 4

Views: 30055

Answers (4)

billyonecan
billyonecan

Reputation: 20260

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

Upvotes: 4

Optox
Optox

Reputation: 620

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.

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.


add this to the html:

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

In your php, add:

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

Upvotes: -1

Jacques
Jacques

Reputation: 3774

Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.

PHP Page:

<?php 

    $name = $_POST['nm']; 

    $place = $_POST['pl']; 

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

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

Upvotes: 0

Guillaume Lhz
Guillaume Lhz

Reputation: 904

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

Upvotes: 1

Related Questions