Using getElementByID and Onchange in embedded Visual Force page to get the field from standard page

Question

I need to use an inline visual force page to use in standard case layout. If I click on a picklist field which is on standard layout , it should display an alert message. I am using getElementById and onChange event in Javascript to achieve this. Page is being displayed for existing cases. But it is not triggering alert message.

See my VF code below

 <apex:page standardController="case">
 <apex:includeScript value="/soap/ajax/30.0/connection.js"/>
 <apex:includeScript value="/soap/ajax/30.0/apex.js"/>
 <apex:includeScript value="/support/console/22.0/integration.js"/>
 <script>

 // document.getElementById("cas14").onchange = function() {myFunction()};   
 document.getElementById("00Nt0000000KGp9").onchange = function() 
 {myFunction()};       

               function myFunction() {  
  alert('you selected Business Area');
                                      }
 </script>
 <apex:form>
 <apex:pageBlock title="My Inline Visualforce page">    

 </apex:pageBlock>
 </apex:form> 
 </apex:page>

Answer 1

An inline VF page on the standard layout is rendered as an iframe. You cannot simply access the parent windows' elements by using document.getElementById();. Please try using window.parent.document.getElementById();.