Jump to content

JS Guide: Caspio Form Elements

Recommended Posts

JavaScript TipsCaspio Form Elements
JavaScript is a client-side scripting language that is commonly used in HTML pages. JavaScript can be used in Caspio Bridge DataPages to extend capabilities outside the standard features. This page provides a guideline for referencing Caspio form elements using JavaScript. It is an advanced topic and you should have prior knowledge of JavaScript programming.
Referencing Caspio Form Elements
A common way to access a form element using JavaScript is by referencing the element's ID attribute using:
          -   document.getElementById("id")
The value in the field can be referenced using:
          -   document.getElementById("id").value
In the following sections, we will list the ID attributes for Caspio form elements in various DataPages.
Submission Forms

  • Text Field/Text Area/Dropdown/Checkbox/Listbox/Hidden:

          -   InsertRecordFIELDNAME
          -   FIELDNAME should be replaced with your field name.
          -   For example: document.getElementById("InsertRecordFirst_Name")

  • Radio Button: A radio button includes multiple options and each option has an associated ID. The ID is a name followed by a number:

          -   InsertRecordFIELDNAMEX
          -   X is the radio button option order, which starts at 0 and increments based on the order of each radio option.
         For example if your radio button has three options: Red, Blue, Green
          -   Red is InsertRecordFIELDNAME0
          -   Blue is InsertRecordFIELDNAME1
          -   Green is InsertRecordFIELDNAME2

  • Virtual Field: cbParamVirtualX

          -   X is the virtual field in the form, which starts at 1 and increments based on the number of the virtual fields in the form.
          -   For example: document.getElementById("cbParamVirtual2") is referring to the second virtual field.

  • Cascading Dropdown: Cascading dropdown and its parent dropdown are referenced by name since the ID changes on every page load. To reference cascading dropdown and its parent dropdown, use the following format:

          -   document.getElementsByName("InsertRecordCompany_Name")[0]
          -   Note that in the above format, the number 0 never changes.

  • Display Only: These are not fields but span tags, therefore they don't have an ID.

Details and Update Forms
Details and Update Forms use the same rules and naming conventions as Submission Forms (in previous section), except that InsertRecord is changed to EditRecord.
          -   EditRecordFIELDNAME
          -   For example: document.getElementById("EditRecordFirst_Name")
          -   Note that Virtual Fields and Display Only rules are the same as Submission Forms (in previous section).
Search Forms

  • Text Field/Text Area/Dropdown/Checkbox/Listbox/Hidden:

          -   ValueX_Y
          -   X is the form element order, which starts at 1 and increments based on the order of the element in the form.
          -   Y is the criteria. It starts at 1 and increments based on the criteria order. It is always 1 if the field has no extra criteria.

  • Radio Button: ValueX_Y[Z]

          -   Z is the radio button option order, which starts at 0 and increments based on the order of the each radio option.

  • Virtual Field: The rules are the same as Submission Forms (in previous section)
  • Cascading Dropdown: This element should be referenced by name as explained in the previous section. The name of the element is ValueX_Y.
  • Distance Search By ZIP/Postal Code:

          -   Center of Search: cbDsField1
          -   Distance: cbDsField2

  • Distance Search By Coordinates:

          -   Center Latitude: cbDsField1
          -   Center Longitude: cbDsField2
          -   Distance: cbDSField3
Authentication/Login Forms

  • Text Field: xip_FIELDNAME

          -   FIELDNAME should be replaced with your field name.
Referencing Forms

  • To access Caspio Forms/DataPages, you can reference the ID using:

          -   document.getElementById("caspioform")


Note that all Caspio DataPages share the same id as "caspioform". Therefore if there are multiple DataPages deployed on the same page, you need to reference them in a different way such as:


          -   document.forms[X]


X starts at 0 which refers to the first form on the page and increments based on the order.


  • To access Caspio Authentication or Login Forms, use:

          -   document.getElementById("xip_DataSourceName")
          -   Replace "DataSourceName" with the name of data source used in your Authentication.
Referencing Buttons

  • Submit Button: Submit
  • Update Button: Mod0EditRecord
  • Delete Button: Mod0DeleteRecord
  • Search Button: searchID
  • Back Button: Mod0CancelRecord
  • Login Button: xip_datasrc_DataSourceName

          -   Replace "DataSourceName" with the name of data source used in your Authentication.
Where to Place the JavaScripts


In Forms, place your code in an HTML Block. The HTML Block should be the last element in the list.


In Results, place the code in the Header or Footer unless you want the code to be executed for every record.


Quick Tips


If you need to reference an element that is not listed in the above document, try using F12/Developer Tools available from most browsers such as IE, Firefox, and Chrome. Developer Tools help web developers inspect the elements on the web page to find the related ID and also debug JavaScript code if necessary using the Console tab. For more information, check online for available tutorials using your browser's Developer Tools.

In the meantime, you can see examples of JavaScript solutions in the community forum.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Create New...