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>
</form>

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>
</iframe>


Thanks!
interclubsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
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 )


<html>
<head>
    <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);
            e.style.width = newWidth;
            e.style.height = newHeight;
        }
    </script>
</head>
<body>
<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>
</form>
<iframe src ="http://www.w3.org" id="virtualDisplay" name="virtualDisplay">
</iframe>
</body>
</html>

Open in new window

0
 
mmarx82Commented:
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: http://www.guymal.com/mycode/iframe_size/
0
 
mmarx82Commented:
Please assign points or close this. If you need more help please state so or Request Attention on this. Thanks
0
All Courses

From novice to tech pro — start learning today.