I'm working on a new feature to a large project my company has developed.

Within a frame named/id'ed as iFrame I have a table which houses a form to submit a job ticket. I have decided that I'd like to give the users the ability to create a new customer within this same page without having to reload the entire page to save time and typing for them.

What I came up with was putting an iframe within this iFrame and having the action take place there, then refreshing that particular sub-iframe (named/ided as subIFrame) that has the new customer data yet leaving the rest of the job frame in tact. I will also be greying out/enabling some buttons, but thats not of importance.

Pre-click Image:
http://www.forgedweb.com/1.PNG
Post-click Image:
http://www.forgedweb.com/2.PNG

The problem is this: When the user clicks to add the new customer, the new customer form is displayed in this subIFrame, under the content of the parent iFrame. I cannot figure out how to set the style.display = none of the parent iFrame.

I have tried:
iFrame.getElementById('tblJobData').style.display = 'none';
parent.getElementById('tblJobData').style.display = 'none';

However, neither of these work. If I take the subIFrame content out of the iframe and place it directly in the form and use document.getElementById('tblJobData').style.display = 'none'; the job content disapears and I am fully able to se the customer form, however this way would of course limit me to having to refresh the whole page rather than just the customer field like i want to.

Any ideas?

Code:
Main file calling iFrame:

</tr><tr valign="top" height="450">
<td colspan="3" class="forumline"><iframe name="iFrame" id="iFrame" frameborder="0" width="100%" height="100%" scrolling="yes" src="/subpage.php?page=job&src=<?=$_GET['src'];?>&action=<?=$_GET['action'];?><?=(isset($_GET['id']) ? '&id='.$_GET['id'] : '');?>"></iframe></td>
</tr>
</table>


iFrame file calling subIFrame:

<table width="800" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<iframe name="subIFrame" id="subIFrame" frameborder="0" width="800" height="75" scrolling="yes" src="/subpage.php?page=job&src=&action=topFrame" style="padding:0;padding-left : 0px; padding-top : 0px;" ></iframe>
</td>
</tr>
<tr>
<td>
<tabl


subIFrame file:

<td colspan="4" style="padding-left:8px;">
<?=object_select($customers, 'customer_id', 'primary_id', 'file_as', '', '', ' style="width:300px;"');?>
<input type="button" name="btnCustomer" id="btnCustomer" value="View" class="frmButton2" onClick="centeredPopup('/subpage.php?page=customer&action=info&id='+document.getElementById('customer_id').value,'winContacts',500,400,'resizable=no,scrollbars=yes');" style="width:75px;">
<input type="button" class="frmButton2" onClick="document.getElementById('tblNewCustomer').style.display = '';document.getElementById('close').style.display = '';iFrame.getElementById('tblJobData').style.display = 'none';document.getElementById('btnCustomer').disabled = true;document.getElementById('customer_id').disabled = true;document.getElementById('addNew').disabled = true;" value="Add New" style="width:115px;" name="addNew" id="addNew">
<input type="button" class="frmButton2" onClick="document.getElementById('tblNewCustomer').style.display = 'none';document.getElementById('close').style.display = 'none'; document.getElementById('tblJobData').style.display = '';document.getElementById('btnCustomer').disabled = false;document.getElementById('customer_id').disabled = false;document.getElementById('addNew').disabled = false;" value="Close" style="width:75px;display:none;" name="close" id="close">
</td>


Thanks!

Why are you using iframes/frames? I would do this with hidden layers.. much easier in my opinion....

I don't like layers for browser compatibility, I did end up resolving that issue though -- now I just need to figure out how to dynamically resize the iframe at the same time :)