Inside Oracle APEX by Patrick Wolf

Today there was a thread on the OTN forum about how to access a Tabular Form cell with JavaScript and I thought it might be of general interest.

Scenario

You have a Tabular Form with 3 columns (Amount, Tax, Total) and want to populate the Total column with the sum of Amount and Tax as soon as Tax has been entered.

Solution?

For “normal” page items there are lot of solutions on the OTN forum, where you just use

html_GetElement('P1_TOTAL').value =
  parseInt(html_GetElement('P1_AMOUNT').value, 10) +
  parseInt(html_GetElement('P1_TAX').value, 10);

But how does it work for Tabular Forms? Quite similar!

Add the following JavaScript code into the

1. Page HTML Header property:

   <script type="text/javascript">
   function calculateTotal(pThis)
   {
   var vRow = pThis.id.substr(pThis.id.indexOf('_')+1);
   html_GetElement('f03_'+vRow).value =
       parseInt(html_GetElement('f01_'+vRow).value, 10) +
       parseInt(html_GetElement('f02_'+vRow).value, 10);
   }
   </script>

2. Tabular Form Element/Element Attributes property of the TAX column:

   onchange="calculateTotal(this);"

f01, f02 and f03 (case sensitive!) in the JavaScript code has to replaced by the field ids APEX is using to reference the tabular form column. The are equal to the numbering of the Apex_Application.g_fxx arrays.

The easiest way to get them is to view the HTML source APEX generates, or use tools like FireBug – use the Inspect feature.

Happy JavaScripting!