?
Solved

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

Posted on 2009-12-29
5
Medium Priority
?
349 Views
Last Modified: 2013-12-24
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?
0
Comment
Question by:chaseivey
  • 3
5 Comments
 
LVL 7

Expert Comment

by:cstsang
ID: 26144102
You need ajax to do so.

Here is pseudo code
0
 
LVL 7

Accepted Solution

by:
cstsang earned 668 total points
ID: 26144118
<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
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 332 total points
ID: 26144981
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
 

Author Comment

by:chaseivey
ID: 26145070
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
 
LVL 7

Assisted Solution

by:cstsang
cstsang earned 668 total points
ID: 26151527
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question