Work with web form fields in JavaScript

In this article, you can find examples of how to use JavaScript to make your forms more interactive by hiding, disabling, and making fields mandatory based on certain conditions. Find unique propertes of certain field types in the fields section.

In order to access fields in JavaScript, you’ll need to use the fd.field() method, which expects a name of a field you want to retrieve. The name of each field on the form is unique. Select a field and copy its name from the Name property:

Copy Name

Note

You should place JavaScript inside fd events like rendered() or beforeSave() to access the fields or controls that you target.

If you just add these scripts on their own or inside the wrong event in the JavaScript editor, they will not have access to the specified fields, or will execute at the wrong time. Read more about different events in the JavaScript framework basics article.

Populate field value

Set the field once the form loads:

fd.rendered(function() {
    fd.field('StartDate').value = new Date();
});

Set field’s hint with JavaScript

Set the field’s hint once the form loads:

fd.rendered(function() {
    fd.field('Name').placeholder = 'Enter your full name';
});

Set field’s title with JavaScript

Set the field’s title once the form loads:

fd.rendered(function() {
    fd.field('Name').title = 'Full Name';
});

Add JavaScript validator to a field

You can add custom validators to fields to make sure their value meets a specific criteria:

fd.rendered(function () {
    fd.field('Attachments').addValidator({
        name: 'Attachments validator',
        error: 'Do not attach more than 3 files',
        validate:function(value){
            if(value.length > 3){
                return false;
            }
            return true;
        }
    });
});

Handle field change

Set the field once value of another field changes:

fd.rendered(function() {

    function setPercentComplete() {
        if (fd.field('Status').value == 'Completed') {
            // Setting the Percent Complete to 100
            fd.field('PercentComplete').value = '100';
        }
    }

    // Calling setPercentComplete when Status value changes
    fd.field('Status').$on('change',setPercentComplete);

    // Calling setPercentComplete on form loading
    setPercentComplete();

});

Disable field

Disable field once specific conditions are meant.

fd.rendered(function() {

    function disablePercent() {
        if (fd.field('Status').value == 'Completed' && fd.field('PercentComplete').value == '100') {
            // Setting field PercentComplete to a disabled state
            fd.field('PercentComplete').disabled = true;
        }
        else{
            // Setting field PercentComplete to an editable state
            fd.field('PercentComplete').disabled = false;
        }
    }

    // Calling disablePercent when the PercentComplete value changes
    fd.field('PercentComplete').$on('change',disablePercent);

    // Calling disablePercent on form loading
    disablePercent();

});

Hide/show field

Hide/show fields once value of another field changes:

fd.rendered(function() {

    function hideOrShowDueDate() {
        if (fd.field('StartDate').value) {
            // Show the Due Date field
            fd.field('DueDate').hidden = false;
        } else {
            // Hide the Due Date field
            fd.field('DueDate').hidden = true;
        }
    }

    // Calling hideOrShowDueDate when the Start Date value changes
    fd.field('StartDate').$on('change',hideOrShowDueDate);

    // Calling hideOrShowDueDate on form loading
    hideOrShowDueDate();

});

Clear fields

Clear fields once value of another field changes:

fd.rendered(function() {

    function clearFields() {
        if (fd.field('Status').value == 'Not started') {
            // Clear fields of any value
            fd.field('StartDate').clear();
            fd.field('DueDate').clear();
        }
    }

    // Calling clearFields when the Status value changes
    fd.field('Status').$on('change',clearFields);

});

Validate fields

Validate fields once value of another field changes:

fd.rendered(function() {

    function validateFields() {
        if (fd.field('Status').value == 'Finished') {
            // Make sure that fields have values if set as required, and check for custom validators
            fd.field('StartDate').validate();
            fd.field('DueDate').validate();
        }
    }

    // Calling validateFields when the Status value changes
    fd.field('Status').$on('change',validateFields);

});

Require field based on condition

Set field to required state if conditions are meant:

fd.rendered(function() {

    function setDueDateRequired() {
        if (fd.field('StartDate').value) {
            // Set Due Date required
            fd.field('DueDate').required = true;
        } else {
            // Set Due Date as not required if there is no Start Date
            fd.field('DueDate').required = false;
        }
    }

    // Calling setDueDateRequired when the Start Date value changes
    fd.field('StartDate').$on('change',setDueDateRequired);

    // Calling setDueDateRequired on form loading
    setDueDateRequired();

});

Modify fields with Button control

Button, Hyperlink, and Image controls can execute code when on click. Add code to the control’s Click property, and it will be executed when a user clicks the control.

Click property

This can be used for variety of purposes and you don’t need to include JavaScript inside fd events as by the time the button has loaded, other fields have already loaded as well.

Add this code inside the Click property for the Button control to change the Title field value:

fd.field('Title').value = "Hello, world!"

For the Hyperlink and Image controls, add event.preventDefault() before the rest of the code to prevent the redirection:

//prevent redirection
event.preventDefault();
alert('Clicked');

Modify fields with Button control and an external API

In this more complex example with a request to an external API, ipinfo.io API will help us determine person’s location and IP.

That’s what our form will look like filled out:

Button fills out Location and IP

Here is the code placed inside my button’s Click property:

$.get("https://ipinfo.io", function (response) {
        fd.field('Location').value = response.city + ", " + response.region;
        fd.field('IP').value = response.ip;
}, "jsonp");