Oracle Apex: Creating On/Off Toggle Switch Using HTML,CSS and JS

Here I am giving an example to create On/Off Toggle switch using HTML, CSS, and JavaScript in Oracle Apex.

In this example, we will create a Toggle switch using HTML and CSS and will assign a value 'Y' if the switch is on and 'N' if the switch is off to a page item using the JavaScript. Follow these steps:

1. Create a Static Region and Add HTML Code

Open your page in Oracle Apex page designer and do the right-click on the content body and select option Create Region.

Optionally, you can set the position of this region to Breadcrumb Bar if your page mode is Normal if Dialog then you can set as Dialog header. Or you can simply show it in the Content Body section.

A region will be created as Static by default so no need to change its type. Now add the following HTML code to the Source > Text property of this region:

<label class="switch">
  <input type="checkbox" id="myCheck" onclick="myFunction()">
  <span class="slider round"></span>
</label>

2. Add CSS to the Page

On your page, move to the CSS section and add the following CSS in Inline field:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

3. Create an Item as Text Field

On click on the above toggle switch, I want to store a value in a text field, so that I can access that value in my PL/SQL code.

To do this, we need to create one more region in the content body section and create an item as a text field. Later you can even change this item type to a hidden item because we just want to use its value in the background.

So now I have one more item P38_CHECKBOX_VALUE in my page number 38.

4. Create a JavaScript Function

On your page, go to the JavaScript section and add the following JavaScript code to the Function and Global Variable Declaration field:

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    apex.item('P38_CHECKBOX_VALUE').setValue('Y');
  } else {
        apex.item('P38_CHECKBOX_VALUE').setValue('N');  
  }
}

Now the save the changes and you are all set to go. For your help, I am adding the images below for the above settings.

Region Settings:

CSS and JavaScript Code Settings:

Output:

When you will click on the toggle switch, then it will set the value 'Y' if it is on and 'N' if it is off.

Reference:

• W3Schools - Create Toggle Switch
• W3Schools - Get Checkbox checked

Related Tutorials:

• Oracle Apex 19.1 – Create Switch Example
• Oracle Apex 19.2: Create Star Rating Page Item (New Feature)