Related Content
Tags
Content Definition
Digital Content

Dynamic dropdown lists in input forms

Posted by Russ Huntington on May 27, 2011
0 people like this tutorial
Rate:

A recent query on our support channel asked how we recommend implementing drop-down lists on an input form when the contents of one depends on the selected value of another. This tutorial describes how to add a custom dropdown list to achieve this goal.

Let’s assume we have two shared content lists: one called Countries that consists of Title only, and the other called Provinces with a Title and a Country ID. We want to have a module that allows the content editor to select the Province, but first they must select the relevant country.

First off, create a module definition called ‘Province Details’. Add a hidden text property called Country Name and a hidden number property called Country ID. Now add a property called ‘Country’ with the following details:

  • Property Type = Linked Content
  • Content Definition = Country
  • Content View = Shared Content
  • Shared Content = Countries
  • Render as = Dropdown list
  • Save Value To Field = Country ID
  • Save Text To Field = Country Name

 

Now add a hidden number field called Province ID – we’ll use this later to store the selected value from our custom dropdown list.

 

Finally we’ll customize the input form (from the Form Customization tab) to add our custom drop down list and script.

 

Under the final FieldRow of the existing input form, add the following mark-up:

Then add the script that will update the new dropdown list based on the select of the country dropdown list:


Make sure the jquery selectors are using the correct field ids (“ContentInputField_2”) for your input form, and you’ll find that you can get the selected ProvinceID in the module using the standard ModuleEval method.

Add a Comment

   
  
 
 
   
Submit

LOGIN

Log in with your Agility username and password or
register for the site




Log In

REGISTER












Register

FORGOT PASSWORD