Datapolis Process System

Search:

Contents
:
IndexBookmarkPrint
Home > Tutorials > Javascript 'onchange' in form fields

Javascript 'onchange' in form fields

 

 

This walkthrough will show you how to create dynamically changing form fields using javascript onchange function. This example contains a check box which disables one of the other controls by clicking.

The end result looks like this:

 

 

Creating workflow


Open designer and define simple workflow with an action to loop to the state. Add 3 variables - 2 strings and 1 boolean. Name them address1, address2, and checked.

 

 

Editing form fields


Go to the action launch form and add all variables to the quick form. Make sure they are set in proper order: address1 -> checked -> address2.

 

 

Now add the logic behind controls. Click edit on checked variable, go to the Javascript section and type name for Client 'onchange' function.

In this example we named it chacked_onchange.

 

 

Additionally you can edit form field name and description so that the form has more refined look.

Javascript code


Go back to the form window and click Custom JavaScript button. In the following window you can click Generate Code, so you don't have to write function headers by yourself.

 

 

As you can see, there are now two functions: _dp_onAfterFormLoaded() and checked_onchange(field, args). For us the latter is more interesting.

Paste there the following code:

function checked_onchange(field, args) {
    var form = Datapolis.Forms.currentForm;
    var address1 = form.fields["address1"];
    var address2 = form.fields["address2"];
    address2.value(args.value?address1.value():'');
    address2.enable(!args.value);
}

 

Args.value indicates whether the checkbox is checked or not. Function copies the content of first textbox to the second one and disables it.

For more information check out our Javascript Object Model reference.

 

Deploy and run


Remember to deploy your workflow before leaving designer. Now you can check how everything works by starting workflow and running the action.

 

 

Download


You can also Download workflow definition and load it to your designer.