I have the following code: Iframe is being shown but I like to hide it until form is submitted. is it better maybe to use Div instead of iframe? I like to get get rid of div thats already there when form is submitted.

<script type="text/javascript">  
function showIFrame() {  
 var iframe = document.getElementById("myiframe");  
 iframe.style.display="block";  
}  
</script>

in my css file

#myiframe {
display:none; }

<form name="search" id="search" method="get"      action=".rvlx" target="carsearch">

<iframe id="myframe" name="carsearch" width="535" height="625" scrolling="no"   frameborder="0"></iframe>


<button type="submit" id="SearchCarButton" class="submitBtn" onclick="showIFrame()"/>  <span>Search</span></button>

I have the following code: Iframe is being shown but I like to hide it until form is submitted. is it better maybe to use Div instead of iframe? I like to get get rid of div thats already there when form is submitted.

<script type="text/javascript">  
function showIFrame() {  
 var iframe = document.getElementById("myiframe");  
 iframe.style.display="block";  
}  
</script>

in my css file

#myiframe {
display:none; }

<form name="search" id="search" method="get"      action="http://tmccaffery.outsideagents./travel/car/search.rvlx" target="carsearch">

<iframe id="myframe" name="carsearch" width="535" height="625" scrolling="no"   frameborder="0"></iframe>


<button type="submit" id="SearchCarButton" class="submitBtn" onclick="showIFrame()"/>  <span>Search</span></button>

• javascript
• ajax
• html
• iframe

5 Answers 5

You're using id="myframe" in the HTML and #myiframe in the CSS.

Either change id="myframe" to id="myiframe" or change #myiframe to #myframe.

iframe.style.visibility="hidden";

and to show it:

iframe.style.visibility="visible";

Edit: And you can use the onsubmit="JavaScriptCode" event to trigger the change.

Reference: http://www.w3schools./jsref/event_form_onsubmit.asp

Change your script to this :)

<script type="text/javascript">  
function showIFrame() {  
var iframe = document.getElementById("myiframe");  
iframe.style.visibility="visible";
}  
</script>

You're using the wrong id - in your css you're using "#myiframe" instead of "#myframe" - no "i".

Here's the correct code:

#myframe { display:none; }

jQuery have load event that is executed when iframe is loaded:

$('#myframe').load(function() {
   $(this).show();
});