Using Ajax to populate one field based on another in an ApEx form

Using Ajax to populate one field based on another in an ApEx form

Often it can be useful to populate one field on a form based on the content of another in a live and dynamic fashion. Luckily this is easily achieved using the Javascript API supplied as part of ApEx 3.1.

This post illustrates an example where we wanted to lookup a value (called IMD Rank) based on the Postcode entered in another field. Users can either enter it manually, or click on a 'Lookup' button next to the field.

Firstly, define your process that will calculate the required value. This is most easily achieved by creating an Application Process (under Shared Components) which will run 'on demand'.

Application Process

This PL/SQL is just retrieving a value (RANKOFIMD) from a table based on a page item (P27_P9_POSTCODE). Note the 'htp.prn()' function call which will actually 'send' the result to our page.

Next, define the JavaScript required to execute the process and return a value.  We'll be displaying the returned value in the page item called P27_P16_IMDRANK. Add this script to the HTML Header section of your page.

Required JavaScript

Note : it is OK to append this script to any code which may already be in this field.

Next, add a button to invoke the JavaScript. I just added a standard HTML button after the element :

Creating the button

Clicking on the Lookup button now populates the field based on the value retrieved by the GetIMD application process.

Comments (0)

Add a Comment

Please login to comment.