I was requested to do some work with forms using the iframes on a web page and it was needed to do a lot of Googling and thought to share those things.
1. Display a form on the main page and when the form is submitted the results should be shown on an iframe on the same page.
a. This task was pretty simple and what I had to do is give the same page as the action page of the form.
b. If the form data is defined on the page I had to show the iframe.When showing the iframe I had to give all the form data as query parameters on the URL of the iframe.
<iframe id=”ifComment” name=”ifComment”
src=”test.cfm?&StartDate=#URLEncodedFormat(form.StartDate)#
&EndDate=#URLEncodedFormat(form.EndDate)#”
width=”730″
height=”600″>
</iframe>
c. Then the resulting page was displayed correctly inside the iframe.
2. Then the resulting page which was inside the iframe was also a web form and it has to be submitted on the event of a button click which was on the main page.
a. For the button click event we have to fire a JavaScript function.
<input type=”image” src=”Images/btnSaveChanges.jpg” onclick=”updateStatusAction()”>
b. On that JavaScript function we can do the submission as follows.
<script language=”javascript”>
function updateStatusAction ()
{
var ifrDoc=document.getElementById(‘ifComment’).contentWindow.document;
ifrDoc.forms[0].submit();
}
</script>
c. This will be doing the submission and we have to redirect the resulting page to the same one.
3. When showing the resulting page inside the iframe we have to update the resulting values according to the values on the main page.
a. For that we have to submit the form again when we are showing the resulting page.
b. So we have to send a query parameter and if the query parameter is true then we have to do the main page form submission.
<script language=”javascript”>
parent.document.getElementById(‘formId’).submit();
</script>
4. If we need o call a JavaScript function on main page on an event of something whch was palced inside the iframe we can call like,
onclick = “return parent.functionName(parameter)”
Hope this may help you when working with iframes and if there are better ways to do this or if something goes wrong (nobody is perfect) please do share it with me.
