提交表单后显示隐藏的DIV

Question

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 ?

Answer 1

use

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

To display output

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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>