Contributed By: Rob Misconin, Sales Engineer, Laserfiche

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.

weekday1

Field Labeling

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.

  • The first field added to the form is labeled q1, the next will be labeled q2 and so on.
  • The fields in this example are labeled q17 and q6 (as seen in the image above).
  • You’ll likely have different identifiers for the fields on the form you created.

Configure the CSS classes

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!

weekday2

Modify the JavaScript code

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:

  • Match the field selectors that I used in the code above to the field selectors on your form.
  • Replace the values in the script with the numbers you found on the form.

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:

  • Adding fields and displaying the sum in another field.
  • Finding the day of the week selected from a date field.
  • Creating a form that allows searches in Laserfiche WebLink.

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

QBS Forms_CTA Banner

Some of the products and services listed on the Laserfiche Solution Exchange were not developed by Laserfiche. The recommendations and opinions expressed on the Laserfiche Solution Exchange are those of the person or persons posting the recommendations only, and they do not necessarily represent Laserfiche's opinion or recommendation of the product or service being reviewed. Laserfiche disclaims all liability resulting from your purchase or use of any non-Laserfiche software product or service listed on the site.