Show Cascading Drop Down Value As Text

[artdocent]

I'd like to display the value of a cascading drop down as text. My submission form allows the user to select a lesson from a list. Once the lesson is selected, I would like to display the lesson description below it. I use a cascading drop down to get the description, but it only shows the first part of the description because it's a drop down. I need to display the full text, which varies from 350-600 characters. I think I need to use document.getElementsByName and assign it to a variable, then display that variable. But, I'm not a JS programmer.

 

Attached is a screen shot of what my form looks like. It allows the teacher to select a lesson then request a time and day for the lesson to be taught. Any help would be appreciated!

 

[Jan]

Hello artdocent,

 

You can add the Virtual field, the Header&Footer element and enter the code to Footer:

<SCRIPT LANGUAGE="JavaScript">
function set_text2()
{
var flag = true;
var elems2 = document.getElementsByTagName("*");
for (var i=0, m=elems2.length; i<m; i++) 
   {
      if (elems2[i].id && elems2[i].id.indexOf("InsertRecorddescription") != -1)  
         {
             var secondDropdown = elems2[i].options[0].text;
          }
    }
document.getElementById("cbParamVirtual1").value = secondDropdown;
}

function set_text()
{ setTimeout(set_text2,500); }


window.onload=set_text;

elems = document.getElementsByTagName("*");
for (var i=0, m=elems.length; i<m; i++) {
    if (elems[i].id && elems[i].id.indexOf("InsertRecordselection") != -1) {
        var firstDropdown = elems[i];
    }
}
firstDropdown.onchange=set_text;
</SCRIPT>

Enter the IDs of your fields instead of InsertRecorddescription, cbParamVirtual1, InsertRecordselection.

You can also set another delay in the line 

setTimeout(set_text2,500);

500 means 500 milliseconds.

 

Now the text from the Description drop down will be displayed in the Virtual field.

 

You can hide the Description drop down by a Rule, set as Criteria Value 1 equal Value 1.

 

I hope, it helps.

[artdocent]

Thanks Jan!

This worked great! 

[AdamH]

I'm having problems getting this to work -- I'm building a Single Record Update, and the "Description" field is a Virtual cascading dropdown (it's virtual because it's part of a View and in a non-editable table).

Instead of InsertRecordFIELDNAME I've used EditRecordFIELDNAME.
I've got the virtual fields identified as cbParamVirtual1 and cbParamVirtual2 (#1 is the cascading Description, and #2 being the Target/display).

I'm only slightly Javascript literate, could somebody please lend a hand? 

[AdamH]

Here's the solution for future searchers.

You use 2 datapages. We'll call one the Main DP and the other the Details DP.

In the Main DP, the "parent" field goes in a dropdown (PARENTFIELD in this example). Directly after that, put this in an HTML block:

<iframe name="ACTUAL NAME OF YOUR DETAILS DP" title="" id= "myframe" width="WIDTHYOUWANTpx" src="">Sorry, but your browser does not support frames.</iframe>

<script>
function f_desc() {
var name = document.getElementById('EditRecordPARENTFIELD').value;
URL= "CASPIO-URL-OF-DETAILS-DP-HERE&Id="+name;
document.getElementById('myframe').src = URL+'';
}
document.getElementById('EditRecordPARENTFIELD').onchange = f_desc;

</script>

Then in the footer of the Main DP, put this (after any other scripts/code):

<script>
f_desc();
</script>

 

For the Details DP (which will appear as a frame inside your Main DP), create a "Details" type of datapage and filter by code number to find the right record. Then for the actual details/display page, just put the Description Field as Display Only.

That's it.