Change iFrame width and height on submit.

I have a form as such:
<form action="showPage.php" method="post" target="virtualDisplay">
Width : <input type="text" name="viewWidth" value="" /> x Height: <input type="text" name="viewHeight" value="" />
<button type="submit">try me.</button>

When the form is submitted, I want to change the height/width of an iframe located on the same page (via JavaScript):
<iframe src ="showPage.php" width="xxxx" height="xxxx" name="virtualDisplay">
  <p>Your browser does not support iframes.</p>

Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

yogi4lifeConnect With a Mentor Commented:
1) add id attributes to your iframe and two input text elements.
2) don't use the old type width and height attributes - but instead use the style.width and style.height like in this example
3) seriously consider using jquery - it makes every javascript programmers life SO much easier (haven't used it in this example)
     ( jQuery: The Write Less, Do More, JavaScript Library )

    <script type="text/javascript">
        function $(elem) {
            return (document.getElementById(elem));
        function resize(elem, viewWidth, viewHeight) {
            var newWidth = $(viewWidth).value;
            var newHeight = $(viewHeight).value;
            var e = $(elem);
   = newWidth;
   = newHeight;
<form action="#" method="post" target="virtualDisplay" onsubmit="return false;">
Width : <input id="viewWidth" type="text" name="viewWidth" value="1024" /> x 
Height: <input id="viewHeight" type="text" name="viewHeight" value="800" />
<button type="submit" onclick="resize( 'virtualDisplay' , 'viewWidth' , 'viewHeight' )">try me.</button>
<iframe src ="" id="virtualDisplay" name="virtualDisplay">

Open in new window

Depending on what your doing, it may be better to resize the iframe according to it's contents with an iframe onLoad event.
See link:
Please assign points or close this. If you need more help please state so or Request Attention on this. Thanks
All Courses

From novice to tech pro — start learning today.