JavaScript can also be used for client validation. We will build a validation on the salary field. When the user raises the salary by more than 10 percent, an alert box will appear where the user can confirm the salary.
Make sure you have a tabular form based on the EMP table. At least the salary column should be present in the form.
- In the application builder, go to the page based on the EMP table.
- In the regions section, click on the edit Report link.
- Click on the edit icon (the pencil) near the salary column.
- In the column attributes section, enter the following in the element attributes text field:
onfocus=remember_oldsal(this.value); onchange=validate_sal(this.id,this.value);
- [1346_03_01.txt]
- Click the Apply changes button and after that, click the Apply changes button again.
- In the page section, click the edit icon.
- In the HTML header and body attribute section, enter the following in the HTML header text area:
<script type="text/javascript"> var oldsal = 0; function remember_oldsal(salary) { oldsal = salary; } function validate_sal(sal_id, salary) { if (salary > (oldsal * 1.10)) { var r = confirm("Are you sure you want to change this salary to " + salary); if (r == false) { $("#"+sal_id).val(oldsal); } } } </script> - [1346_03_02.txt]
The header now contains two JavaScript scripts and one variable declaration. This variable declaration is necessary because if the variable had been declared in a function, it wouldn't have been accessible. The function REMEMBER_OLDSAL copies the salary when the user navigates to the salary field. The function VALIDATE_SAL calculates the old salary raised by 10 percent and if the new salary is greater than the old salary plus 10 percent, a pop-up alert is displayed. If the cancel button is clicked (r == false), the value of the variable oldsal is copied to the salary column. Otherwise, do nothing and leave the newly entered salary.
- Click the Apply changes button.
- Run the form and see what happens if you change a salary by more than 10 percent.
Everything you put in the HTML header will be presented in the HTML header of the page. You can see this by right-clicking on the page and selecting view source. You will then see the HTML code which is used to present the page. On the top of the code, you can see your JavaScript code.
The JavaScript functions can be called from objects in the webpage. For example, you can call a JavaScript function when the user navigates to a text item or when the body of a webpage is loaded.
Items can be identified by an ID or a name and you can get or set the value of items with the jQuery function $("#ITEM").val(), like:
Variable = $("#P18_ID").val();
Before APEX 4, you had to use:
Variable = document.getElementById(id).value;
You can also put values into the items with this function:
$("#P18_ID").val(5000);
Or, before APEX 4:
document.getElementById(id).value = 5000;
And you can also use the jQuery syntax to copy values between items:
$("#P18_NAME").val($("#P18_TEXT").val());
In APEX you can add a call to a JavaScript function in the element attributes of the item.
There are various ways to include JavaScript code in the page. You can put JavaScript code in the HTML header of the page or the region but you can also put some JavaScript code in the item. Go to the item and type your code in the HTML section.
Since APEX 4, working with JavaScript has been made easy with the use of dynamic actions, region display selectors and plug-ins. This recipe is included to show how JavaScript works in APEX but if you can, use the new features. They will save you a lot of work.