php - Display a hidden DIV after a form submit action - Stack Overflow

admin管理员组

文章数量:1296242

I am trying to show a hidden div after submitting a form data

Below is my form html where the input section will have a form to enter the data and after submitting the form I have to show hidden output section and show result there

html code:

<div id="input">


----- some form datas here ----

<div id="submit">
        <input type="submit"  id="generate" name="script" value="generate" />

    </div>

</div>


<div id="output" style="display: none;">


--- php echo from above form------

</div>


</form>

css:

#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}


#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}

After going through some previous discussion about the same topics, below is one of the answered solution for this

create a JavaScript like to show the hidden div after form submission.

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

});

or

$('form').submit(function(e){
    $('#output').hide();  
    e.preventDefault();
    // Or with: return false;        
});

But both the solutions are not working for me.the second is able to show the hidden div output but it not showing actual form data.

How can I show it correctly ? I need to show this after form submission (type="submit")

UPDATE:

1. Removed the inline css to hide div

2. Added css function in style sheet to hide div

   #output{
   display:none;
   width:800px;
   margin: auto;
   border-width:1px;
   border-style:solid;
   border-color:#ddd;
   }
   

3. Added below jquery to show div on form submit

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

Still I an not able to achieve the result. Any clue here ?

I am trying to show a hidden div after submitting a form data

Below is my form html where the input section will have a form to enter the data and after submitting the form I have to show hidden output section and show result there

html code:

<div id="input">


----- some form datas here ----

<div id="submit">
        <input type="submit"  id="generate" name="script" value="generate" />

    </div>

</div>


<div id="output" style="display: none;">


--- php echo from above form------

</div>


</form>

css:

#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}


#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}

After going through some previous discussion about the same topics, below is one of the answered solution for this

create a JavaScript like to show the hidden div after form submission.

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

});

or

$('form').submit(function(e){
    $('#output').hide();  
    e.preventDefault();
    // Or with: return false;        
});

But both the solutions are not working for me.the second is able to show the hidden div output but it not showing actual form data.

How can I show it correctly ? I need to show this after form submission (type="submit")

UPDATE:

1. Removed the inline css to hide div

2. Added css function in style sheet to hide div

   #output{
   display:none;
   width:800px;
   margin: auto;
   border-width:1px;
   border-style:solid;
   border-color:#ddd;
   }
   

3. Added below jquery to show div on form submit

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

Still I an not able to achieve the result. Any clue here ?

• php
• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 1, 2013 at 13:56 acr asked Aug 1, 2013 at 8:50 acracr 1,7461111 gold badges4949 silver badges8383 bronze badges 5

• i don't think $('#doutput') exists in your code, or is it? – Dhaval Marthak Commented Aug 1, 2013 at 8:53
• @ DKM : That was a typo. corrected.. – acr Commented Aug 1, 2013 at 8:56
• you have mentioned that the second option is not showing form data, but how are you setting the form data value to the output section? are you setting the values on submit? – Harry Commented Aug 1, 2013 at 9:21
• @ Harry using PHP echo – acr Commented Aug 1, 2013 at 9:42
• ok, can you show a sample of that PHP echo statements? also, wouldn't PHP echo get executed only on page load when the form values would be blank? are you executing any code to refresh the contents on submit? – Harry Commented Aug 1, 2013 at 9:48

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 3

use

<form id="form" action="">
</form>

To display output

 $(document).ready(function() {
        $('#output').hide();
        $('#form').submit(function(){
                 $('#output').show();   
        });
    });

$('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    // Or with: return false;        
});

Here in your script you are spelling doutput. replace it with output

and to show use .css() function and define display: block !important; because you have displayed it in your inline style so to override this you need to set !important.

Alternatively, define display: none; in the stylesheet instead of using in inline style and do the rest without setting !important

Remove Display: none;

And do this code

$('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    // Or with: return false;        
});

to hide and

$('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    // Or with: return false;        
});

to show

You could use .hide() and .show() as opposed to editing CSS attributes via .css().

$('document').ready(function() {
    $('#output').hide();
    $('form').submit(function(e) {
        $('#output').show();
        e.preventDefault();
    });
});

if you want to show results within the DIV, there are many ways to do this.

1. Javascript Give all your form data an ID, and then write a javascript function to fill the answers in the said DIV.
2. Ajax Post your form to ajax, return the response to your DIV
3. New page request After submitting, check to see if $_POST is set and then show the div with $_POST contents.

If I got it right you don't want to reload the page. In this case you need to send the form data via ajax call. Than you can display the response and the hidden div.

CSS

#output {
    display:none;
}

jQuery

$(document).ready(function(){

    $('form').submit(function(e){

        // Prevent the default submit
        e.preventDefault();

        // Collect the data from the form
        var formData =  $('form').serialize();

        //Send the from
        $.ajax({
            type: "POST",
            url: "generator.php",
            data: formData,

            success: function(msg){
                // Insert the response into the div
                $('#ajaxResponse').html(msg);

                // Show the hidden output div
                $('#output').slideDown();
            }
        });    
    });

});

HTML

<div id="output">

    --- php echo from above form------

    <div id="ajaxResponse"></div>

</div>

You could try using the "action" attribute of the form element or you could try the jquery serializeArray method at the form element right after the submit.

<form>
    <input type="text" name="giveNameHere" />
    <input type="submit"  id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
    Output Content
</div>

$('form').submit(function () {
    $('#output').show();
    console.log($(this).serializeArray());
    return false;
});

Please see this jsfiddle

本文标签： phpDisplay a hidden DIV after a form submit actionStack Overflow