Как отобразить CFDIV, имеющий динамическое содержимое с самой привязкой AJAX?

Question

У меня есть следующие теги CFSELECT, которые используются для ввода текста:

<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})" />

Ввод текста - это единственное значение, которое необходимо отправить в форме:

<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>

Я хочу, чтобы форма и ее содержимое были видны только , когда были сделаны все три выделения, и есть значение для ввода текста. Каков наилучший способ сделать это? Я предполагаю, что какое-то использование CFDIV - лучший способ, но я не уверен, как таким образом загрузить динамический контент (CFINPUT).

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>

Лично я бы немного упростил этот JS, используя jQuery, но я не знаю, используете ли вы уже jQuery на своем сайте, и я не хочу быть еще одним пустым ответом "use jquery"; так что это должно работать без jQuery, если вы хотите / должны обходиться без него. (Но jQuery потрясающий!)