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.