How do I unhide a CFDIV that has dynamic content with AJAX binding itself?

Question

I have the following CFSELECT tags that are used to populate a text input:

<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" />

<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" />

<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" />

The text input is the only value that needs to be submitted in a form:

<cfform name="addItem" method="post" action="somepage.cfm">
    <cfinput 
        type="text" 
        id="item" 
        name="item" 
        bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />

    <cfinput 
        type="submit" 
        name="addButton" 
        value="Add Item" />
</cfform>

I want the form and it's contents to be visible only when all three selections have been made, and there is a value for the text input. What is the best way to do this? I'm assuming some use of CFDIV is the best way, but I'm not sure how to load the dynamic content (the CFINPUTs) this way.

Answer 1

<cfselect id="this" name="this" bind="cfc:Data.getThis()" bindonload="true" onChange="toggleForm();" />
<cfselect id="that" name="that" bind="cfc:Data.getThat({p1})" onChange="toggleForm();" />
<cfselect id="theOther" name="theOther" bind="cfc:Data.getTheOther({p1}, {p2})" onChange="toggleForm();" />

<div id="theForm" style="display:none">
<cfform name="addItem" method="post" action="somepage.cfm">
    <cfinput 
        type="text" 
        id="item" 
        name="item" 
        bind="cfc:Data.getResult({this}, {that}, {theOther})" /><br />

    <cfinput 
        type="submit" 
        name="addButton" 
        value="Add Item" />
</cfform>
</div>

<script type="text/javascript">
    function toggleForm(){
        var a = document.getElementById("this").selectedIndex;
        var b = document.getElementById("that").selectedIndex;
        var c = document.getElementById("theOther").selectedIndex;
        if (a > -1 && b > -1 && c > -1){
            document.getElementById("theForm").style.display = "";
        }
    }
</script>

Personally I would simplify that JS a bit by using jQuery, but I don't know if you're already using jQuery on your site, and I don't want to be another "use jquery" empty answer; so this should work without jQuery, should you want/need to go without it. (But jQuery is awesome!)