JavaScript

To coding with JavaScript in Scriptcase Form application, we must associate a JavaScript event to a form field.

Edit JavaScript Interface.

Select the object

This Combo box displays the fields of the form application, and also the form itself as an object

Select the event

Use it to associate the event with the selected field to apply the JS code. View the events available:

onclick: Acts when clicking on the field.
onblur: Acts when the focus leaves the object.
onChange: Acts when the focus leaves the object, and there are changes in the value.
onFocus: Runs when the focus gets in the object.
onMouseOver: Runs when the mouse pointer hovers the object.
onMouseOut: Runs when the mouse pointer moves out the object.

The events below are associated directly with the form object.

OnLoad: This event runs when the page is loaded, also when clicking on the navigating buttons.
onSubmit: This event runs when clicking on the “New”, “Save”, and “Delete” buttons.

Edit JavaScript

     *Select the object and event, then click on the Edit button. It opens a page to inform custom JavaScript routines and standard ScriptCase events. e.g.: nm_recarga_form(); // refreshes the form.
     
     ![Edit JavaScript Interface][javascript_edicao_code]
     *Edit JavaScript Interface*
     
    > The JavaScript language doesn't have the same behavior in all the browsers available. A tip is to test running the application in more browsers you can.

OnClick Example
- When clicking on a field of type radio, you can enable or disable form fields according to the selected value.

 if(document.F1.gender[0].checked){
     document.F1.maternity.disabled = false;
     document.F1.maternity.style.background='FFFFFF'
 }
 if(document.F1.gender[1].checked){
    document.F1.maternity.disabled = true;
    document.F1.maternity.style.background='FCEEBC'
 }

To access the values of a radio field, you need to use the index.

OnBlur Example

You can define a warning for the field “weekly_work_time” when the focus is getting out it.

  if (document.F1.tp_point[0].checked  && document.F1.weekly_work_time.value > '20')
  {    
       alert("The work time exceeds the limit allowed");
       document.F1.weekly_work_time.value = "";
       document.F1.weekly_work_time.focus();
  }

OnChange Example

By modifying the “Salary” of an employee and leaving the field, we’ll check if his “position” is “gardener”.

  if (document.F1.salary.value > 2000.00 && document.F1.position.value == 'gardener'){
         
  alert('When I grow up, I want to be a gardener);
  }

OnFocus Example

After informing the purchase value and selecting the payment method in a Select object “Select: pay_method”, the JavaScript code below calculates the value of the purchase.

  if (document.F1.pay_method[document.F1.pay_method.selectedIndex].text == 'Money')
  {
        document.F1.total.value = document.F1.pauchase_value.value;
  }
        

OnMouseOver Example
- You can change the style (background color, font and font color) when the mouse hovers the field.
```
  document.F1.field_name.style.bgColor = "0FFCCA"
```
onMouseOut Example
- Sets the background color when the mouse moves out from the field.
```
  document.F1.field_name.style.bgColor = "FFFFFF"
```

JavaScript

Select the object

Select the event

Events related to the Form

Edit JavaScript