Extending With Javascript

You can use any valid JavaScript with your forms. For example, let's have a look at the form used to checkout of the shopping cart.



Above the ship to address on the form, there is a checkbox that allows the user to indicate they want to ship their products shipped to their '"bill to" or "ship to" address.



If this checkbox if checked by the use clicking it, all the fields in the ship to section will disappear. When the user clicks it again, the fields will re-appear. So in general, we are hiding and showing fields on the form based on a users selection.

To create this kind of feature, double click on any field, here the "Ship to same as bill to" checkbox expand the "Advanced" option if not expanded already, and add a JavaScript function into the "Other Parameters" check box.



We are using the onclick function to so when the user click the checkbox, we can run a JavaScript function. We'll create our own function named "setupshippingaddress" and add it to the top of out form. To do so, click the "Edit Text" tab at the top of the form designer to view the plaint text form source code:



So we've create our function and we're passing into the function the value of the checkbox using "this.checked" into the variable "chk". If the checkbox is checked, chk will be true and all the fields in the ship to address section will be hidden by setting the display of the rows that these fields are on in the table to "none".

document.getElementById('SFN').style.display='none';

The ID "SFN" was given to the row of the "Ship to first name" field. This is at the bottom of the form elements in the advanced settings section:



This is just an aribtrary unique ID we made up. So all the rows for all the fields in this section have been given an arbitrary unique ID in like manner and the JavaScript function toggles the display of these rows based on the value of the checkbox.