Go to Scriptcase store

# 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.

#### Events related to the Form

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"

#####

#####