Question

Possible Duplicate:
Resizing an iframe based on content

What I am trying to do is:

Use a div to post a form to as an alternative to using ajax as there are some things that I need that are not working with ajax. My code is below for the 2 pages I am using:

The page with the form:

<form action="iframe.php" method="post" onsubmit="document.getElementById(\"\")" target="my_iframe">
    <input type="hidden" name="post" value="postdata" />
  <input type="submit" value="Do Stuff!" />
</form>
<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe frameborder="0" name="my_iframe" id="frame" src="iframe.php"></iframe>

The iframe source:

<?php
    if(isset($_POST['post'])){
        var_dump($_POST);
    }
?>

What can I do about this? Thanks in advance!

Answer 1

Start with your iframe being hidden in CSS with:

#frame {display:none}
.visible {display:block}

Then something like this on the submit button:

onclick="$(#frame).addClass('visible');"

This will work regardless of what the form does, though, so if you have validation, the frame will still become visible each time the button is clicked. If you rather, you can toggle it on and off with each press, like this:

onclick="$(#frame).toggleClass('visible');"