Comment afficher un CFDIV ayant un contenu dynamique avec la liaison AJAX elle-même?

Question

je les balises CFSELECT suivantes qui sont utilisées pour remplir une entrée de texte:

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

L'entrée de texte est la seule valeur qui doit être soumis sous une forme:

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

Je veux que le formulaire et son contenu pour être visible seulement lorsque les trois sélections ont été faites, et il y a une valeur pour la saisie de texte. Quelle est la meilleure façon de procéder? Je suppose que l'utilisation de CFDIV est la meilleure façon, mais je ne suis pas sûr de savoir comment charger le contenu dynamique (les CFINPUT) de cette façon.

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> 

Personnellement, je simplifierait que JS un peu en utilisant jQuery, mais je ne sais pas si vous utilisez déjà jQuery sur votre site, et je ne veux pas être un autre « utilisation jquery » vide répondre; donc cela devrait fonctionner sans jQuery, si vous voulez/devez vous en passer. (Mais jQuery est génial!)