Automation from the point of capture is a persuasive value proposition for prospects seeking to improve enterprise-wide processes. Beginning a document’s life cycle with Laserfiche Forms allows organizations to expedite business processes, ensure information accuracy and take control of the information being collected from users. Here is a useful example of how to populate a field with the day of the week corresponding to a particular date.

Laserfiche Forms has a simple drag-and-drop interface that allows users to add many different field types to forms and collect the information that drives business processes.

One reason Laserfiche Forms has a wide range of possible uses is because it contains a section that allows form customization with CSS and JavaScript. The CSS modifies the appearance of the elements on the page (such as the font color, field size and layout), and the JavaScript modifies the behavior of the fields (such as calculating data totals within fields).

For those who do not have coding experience, there is no need to worry! This article introduces a new way for any user to look like a programming expert.

For example, a form tracks appointments at a doctor’s office. When the Appointment Date field is populated with “January 12, 2015,” the “Start Day” field should automatically be populated with “Monday.”

For the sake of this example, the form includes one date field (Appointment Date) and one dropdown field (Start Day). The dropdown field must list each day of the week as a separate choice (such as Monday, Tuesday etc.). Please note that other fields can exist on the form, but to get the code below to work, you’ll need at least those two fields.

Laserfiche Forms keeps track of all the fields in a particular form by individually numbering them. These field selectors are labeled in the CSS and JavaScript sections of the Forms Designer.

In order for this code to work properly, you must set the CSS class for each of those fields. The CSS class is available when creating or modifying the form inside of the Advanced tab. The Appointment Date CSS class is startDate and the CSS class for the Start Day is dayWeek. Please note that capitalization is important and must match the CSS classes in your code in order for this to function correctly!

Once you’ve set the CSS classes, insert the following JavaScript into the JavaScript section of the form, and modify it as instructed below:

$(document).ready(function () {
function findDay() {
var d = new Date($('#Field17').val());
var weekday = new Array(7);
weekday[0]= "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var n = weekday[d.getDay()];
$('.dayWeek select').val(n);
$('.dayWeek select').trigger('change');
}
$('.startDate').on('change', 'input', findDay);
});

To modify this code in a form, follow these steps:

In other words, if your date field’s identifier is #q1, then you’ll replace #Field17 (in the third line of code) with #Field1. You must also match the dropdown field’s selectors. If you wish to use different CSS classes than described in the paragraph above, you’ll also need to modify the script and replace the instances of the old CSS class names with the CSS class names that you used.

There are many interesting, dynamic ways to modify the fields in a form, including:

Get the complete guide to Laserfiche Forms and see how electronic forms have helped organizations get rid of paper and inefficiency.