How do I build a dependent dynamic list box in my form?

Hello,
I am using ColdFusion to develop an application, and I've run into an obstacle.  

My 'product add' form allows the user to select a BRAND, and then a PRODUCT LINE within that brand (2 separate fields).  These form elements are populated dynamically, but I need the second (PRODUCTLINE) to only populate after the user selects a BRAND.  That way, I can filter the query so that they cannot select a PRODUCTLINE that doesn't belong to that BRAND.  

Is this a Javascript thing or can ColdFusion handle this alone?
Either way, what is the best way to code this?
chaseiveyAsked:
Who is Participating?
 
KNVB HKSITOCommented:
<script language=javascript>
    function updateProductLine(x)
    {
       var v=x.options[x.selectedIndex].value;
       //call ajax to get data from database.
      // update the product line drop down box.
    }
</script>
<form>
   Brand:<select onchange="updateProductLine(this)">
        ......................
    </select>
   Product line:<select name="productLine">
   ...............
   </select>
</form>
0
 
KNVB HKSITOCommented:
You need ajax to do so.

Here is pseudo code
0
 
Gurvinder Pal SinghCommented:
you can add an option into the select box (list box) dynamically using the following code
listObj = document.getElementById("selectBoxId");
listObj.options[ listObj.options.length ] = new Option( value, value);

for your requirement, you need to just call a function (having this code) at the onchange event of the previous list box.

thanks
0
 
chaseiveyAuthor Commented:
Ok, I'm a bit shaky with Javascript, but i think I see what you're doing.  I'm just lost at this part:

      var v=x.options[x.selectedIndex].value;
            //call ajax to get data from database.
            // update the product line drop down box.

Can you explain what's happening here in more detail?
0
 
KNVB HKSITOCommented:
You copy the attached file to your server first.
<script language="JavaScript" src="Ajax.js"></script>
<script language=javascript>
    var ajax=new Ajax;
    function updateProductLine(x)
    {
       var v=x.options[x.selectedIndex].value;
       ajax.sentAjaxPostRequest("your coldfusion program","brandId="+v,updateProductLine);        
    }
    function updateProductLine(data)
    {
       if (ajax.getReadyState()== 4)
        {
            eval(data);
        }
    }
</script>
<form>
   Brand:<select onchange="updateProductLine(this)">
        ......................
    </select>
   Product line:<select id="productLine"></select>
</form>
It is because I have no knowledge on coldfusion.
I just tell you the flow.
You read the value of "brandId", then query DB,

Then output the result as the following:

listObj = document.getElementById("productLine");
listObj.options[listObj.options.length] = new Option(product line name, procduct line id);

In fact, that is not perfect solution, I just want to let you experience the ajax.
Enjoy it first.


Ajax.js
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.