How to Implement Oracle Forms KEY-NEXT-ITEM Behavior in Oracle APEX

If you’ve worked with Oracle Forms, you know how convenient the Enter key is for moving between fields or directly to action buttons like Save or Update. In Oracle APEX, this behavior doesn’t exist by default—but with a little JavaScript, we can replicate it perfectly.

In this blog, we’ll show you step by step how to implement a KEY-NEXT-ITEM trigger in APEX forms.

Why KEY-NEXT-ITEM Matters

Improves data entry speed.
Reduces mouse clicks for repetitive tasks.
Mimics the Oracle Forms experience, making it easier for legacy users to adopt APEX apps.
Ensures data consistency by guiding the user through the form logically.

Step 1: Create Your APEX Form

Assume you have a form with:

An ID field (P31_ID)
Several input items (P31_NAME, P31_GRADE_YEAR, etc.)
Save and Update buttons (BTN_SAVE, BTN_UPDATE)

Step 2: Add the JavaScript Function

Go to Page → JavaScript → Function and Global Variable Declaration, and paste:

----------------- KEY-NEXT-ITEM :

FUNCTION AND GLOBAL VARIABLE :

function keyNextItem(e, nextItem, goSave) {
if (e.key === "Enter") {
e.preventDefault();

// If go to Save / Update button
if (goSave === true) {

// Check if ID item has value
if ($v('P31_ID') !== '') {
// Focus UPDATE button
document.getElementById("BTN_UPDATE").focus();
} else {
// Focus SAVE button
document.getElementById("BTN_SAVE").focus();
}
} else {
apex.item(nextItem).setFocus();
}
}
}

> ADVANCED > CUSTOM ATTRIBUTES

onkeydown="keyNextItem(event,'P31_GRADE_YEAR',false)"

-- GOES TO BUTTON :

onkeydown="keyNextItem(event,null,true)"

The following will highlight the button to green when FOCUS BUTTON SAVE AND UPDATE.

FUNCTION AND GLOBAL VARIABLE :

function focusGreen(btnId) {
var btn = document.getElementById(btnId);
btn.classList.add("apex-green-focus");
btn.focus();
}

ADVANCED>CUSTOM ATTRIBUTES

onkeydown="keyNextItem(event,'P31_GRADE_YEAR',false)"

GOES TO BUTTON :

onkeydown="keyNextItem(event,null,true)

--------------

INLINE CSS

.apex-green-focus:focus {
background-color: #28a745 !important; /* green */
border-color: #28a745 !important;
color: white !important;
box-shadow: 0 0 5px #28a745;
}

This is my Grade Table: ID, Name, and Grade Year.

CREATE TABLE  "GRADES" 
   (	"ID" NUMBER(10,0), 
	"NAME" VARCHAR2(100), 
	"GRADE_YEAR" NUMBER(4,0), 
	"ENTRY_BY" NUMBER(10,0), 
	"ENTRY_DATE" DATE, 
	"UPDATE_BY" NUMBER(10,0), 
	"UPDATE_DATE" DATE, 
	 CONSTRAINT "PK_GRADES" PRIMARY KEY ("ID") ENABLE
   );