Accessing Tabular Form cell with JavaScript

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!

One thought on “Accessing Tabular Form cell with JavaScript

  1. Hi experts

    I have the following report

    select code, descr, amount, null
    from table1

    Code description amount (image to add – like buttom)
    H00 TEST 500.00 +
    H10 TEST1 300.00 +
    H20 TEST2 200.00 +
    H30 TEST3 250.00 +
    H40 TEST4 1000.00 +

    then when I press the image then I need to perform INSERT into TABLE1 (code, desc, amoun, row_num) values (colum_report1, column_report2 …. n)

    So another things is that the end user could be change the descripton or the amount values and I need to insert the last values, the end users only can choose one record at the moment…

    Thanks for your help I’m new in APEX and I lost a lot time searching how to do that…

Comments are closed.