Feedback Print

JavaScript

The concept of editing JavaScript in Scriptcase is associated with the fields of the form and JavaScript events, so for each field edited in the JavaScript option, they will be associated to a specific event.

Edit JavaScript Interface. Edit JavaScript Interface.

  • Attributes

    • Select the object : In this Combo box will be displayed the fields that are part of the form application, also the Form its self as an object.
    • Select the event : In this Combo box you need to associate the event with the selected field, that you are going to apply the JS code. View the events available:
      • onclick : Runs when the field is clicked.
      • onblur : Runs when the object loses focus.
      • onChange : Runs when the object loses focus and its value is modified.
      • onFocus : Runs when the object receives focus.
      • onMouseOver : Runs when the mouse pointer hovers the object.
      • onMouseOut : Runs when the mouse pointer is removed from above the object.
    • Events related to the Form : The events below are associated directly with the form.
      • OnLoad : This events runs when the page is loaded, also when navigating between records and clicking on the buttons (Next, Previous, etc.).
      • onSubmit: This event runs when clicking on the buttons “New”, “Save” and “Delete”.
    • Edit JavaScript
      • After selecting the object and the event and clicking on the button (Edit), it’ll open the page to edit the JavaScript routine, that’ll run the moment that the selected event is triggered. On this page you can inform custom JavaScript routines or use the standard ScriptCase events, e.g. nm_recarga_form(); that refreshes the form.

      Edit JavaScript Interface Edit JavaScript Interface

      • After saving the JavaScript Routines by clicking on (save), it’ll conclude the work.
      • The JavaScript language won’t always have the same behavior in all Browsers available in the market. Always when necessary to write a block more elaborated or complex in this language, it’s important to do the necessary tests in the browsers that the application will run.
  • OnClick Example

    • When clicking on a field of type radio, you can enable or disable a series of fields of the form according to the value selected.
 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 a radio type field, you need to use the index.

  • OnBlur Example
    • You can define a warning around the field “weekly_work_time” when it loses the focus.

        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 and employee and exiting the field, at this moment we’ll check if the “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
    • After informing the purchase value and selecting the payment method in a Select type 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 etc.) when the mouse hovers the field.

        document.F1.field_name.style.bgColor = "0FFCCA"
      
  • onMouseOut Example
    • Sets the background color when the mouse exists the hover of the field.

        document.F1.field_name.style.bgColor = "FFFFFF"