Please enable JavaScript to view this site.

ASPRunnerPro 10.2 Manual

Navigation: Advanced topics > Events

PHPrunner32x32     ASPRunnerPro manual


Field events

Scroll Prev Next More

 

Field events option allows to perform an action when cursor enters edit field or leaves it or mouse is over a field. Perform any sort of validation, make other fields hidden or required etc. Designed to work on Add, Edit and Register pages.
For example, the editing event is fired when an element changes its value. Text fields fire this event while user entering the text.

See also:

How to access fields in the field events

Passing data between events

 
field_events
 
Using field events

We have two tables: categories and sub_categories. CategoryID is a two-digit category code.
scr_categories

In sub_categories table SubID consists of two-digit category code and and two-digit subcategory code.

scr_subcategories

What we need to do is to simplify adding a large number of subcategories. When user types in first two digit (category) we want to show category name underneath and also calculate the next subcategory number. We will do that using field events.
 
Code

First we need to create Field Event for SubID field. We will use 'editing' event here which will be called every time the content of field is changed.

scr_field_event_code

ClientBefore:

 

var val = this.getValue();
if (val.length==2)
 params["val"]=val;  
else
return false;

In ClientBefore code we check the length of entered code and only send it to server side when code is two digits long.

Server:

 

result("catName") = DBLookup("select CategoryName from categories where CategoryID='" & params("val") & "'")
res = DBLookup("select max(substring(SubID,3,2))+1 from sub_categories where left(SubID,2)='" & params("val") & "'")
if len(res)<2 then
res = "0" & res
end if
result("newCat") = params("val") & res

 

On Server side we pull CategoryName from categories table and also calculate next subcategory ID. We pass both category name and new subcategory code back to ClientAfter event.

ClientAfter:

$("#sub_tip").remove();
$("input[id=value_SubID_1]").after("<div id='sub_tip' style='margin-top: 10px; color: blue;'>"+result["catName"]+"</div>");
ctrl.setValue(result["newCat"]);

 

In this event we remove previous tooltip with category name and add a new one. We also make it appear in blue color. Then we set the value of SubID with new subcategory code we received from the Server event.

Here you can see how it works in generated application.

See also:

How to access fields in the field events

Passing data between events