Ne vous répétez pas les meilleures pratiques en montrant et en masquant les champs

J'essaie de trouver la meilleure façon d'afficher et de masquer les champs qui sont réutilisés. Nettoyer le code pour que je ne me répète pas "DRY". Quelqu'un peut-il m'aider s'il vous plaît dans les meilleures pratiques de le faire?Ne vous répétez pas les meilleures pratiques en montrant et en masquant les champs

Ce que j'ai est une sélection qui permet à l'utilisateur de choisir parmi deux rapports différents.

<select class="form-control" id="reporttype" name="reporttype"> 
    <option value="" selected="selected">Select Report</option> 
    <option id ="checklistreport" value="checklistreport" >Checklist Stats</option> 
    <option id ="locationreport" value="locationreport" >Location Stats</option> 
</select>

Ensuite, chaque rapport a beaucoup de champs similaires. Comment puis-je les faire utiliser les mêmes champs mais cacher/montrer les différences et aller à la bonne forme "action" basée sur quel rapport est choisi.

Lieu Rapport

<form name="generatereport" method="post" action="_location_queries.cfm"> 

<select name="Location" id="loc" multiple="multiple" required size="9"> 
    <option value="OPERATIONS">Operations</option> 
    <option value="CCC">Contact Center</option> 
    <option value="QA">QA Department</option> 
    <option value="DS">DeSoto</option> 
    <option value="PS">Palma Sola</option> 
    <option value="LWR">Lakewood Ranch</option> 
    <option value="NR">North River</option> 
    <option value="SDL">SDL</option> 
    <option value="FSC">FSC</option> 
</select> 

<button id="add" type="button">ADD ALL</button> 
<button id="rem" type="button">REMOVE ALL</button> 

<textarea id="selected" rows="10" readonly></textarea> 

<br /><br /> 

<label for="StartDate">From</label> 
<input type='text' name="StartDate" id="StartDate" value="" required/> 

<br /><br /> 

<label for="EndDate">To</label> 
<input type='text' name="EndDate" id="EndDate" value="" required/> 

<br /><br /> 

<label for="Format">Format</label> 
<select name="Format" required> 
    <option selected value="">Select Format</option> 
    <option value="print">Print</option> 
    <option value="pdf">Preview</option> 
    <option value="xls">Excel</option> 
</select> 

<br /><br /> 

<input type="submit" name="submit" value="Continue" /> 

</form> 

<script type="text/javascript"> 
var opts = document.querySelectorAll('#loc option'); 

document.getElementById('add').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = true; 
    } 

    reflectChange(); 
}); 

document.getElementById('rem').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = false; 
    } 

    reflectChange(); 
}); 

document.getElementById('loc').addEventListener('change', reflectChange); 

function reflectChange() { 
    document.getElementById('selected').value = ''; 

    for (var i=0; i<opts.length; i++) { 
     if(opts[i].selected) 
     document.getElementById('selected').value += opts[i].text+'\n'; 
    } 
} 
</script>

rapport Liste

<form name="generatereport" method="post" action="_checklists_queries.cfm"> 

<select name="Location" id="loc" multiple="multiple" required size="8"> 
    <option value="OPERATIONS">Operations</option> 
    <option value="CCC">Contact Center</option> 
    <option value="QA">QA Department</option> 
    <option value="DS">DeSoto</option> 
    <option value="PS">Palma Sola</option> 
    <option value="LWR">Lakewood Ranch</option> 
    <option value="NR">North River</option> 
    <option value="SDL">SDL</option> 
    <option value="FSC">FSC</option> 
</select> 

<button id="add" type="button">ADD ALL</button> 
<button id="rem" type="button">REMOVE ALL</button> 

<textarea id="selected" rows="7" readonly></textarea> 

<br /><br /> 

     <cfquery name="GetActiveEmps" datasource="tco_associates"> 
      SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates 
      WHERE assoc_status = 'ACTIVE' 
      and assoc_last NOT LIKE 'Test%' 
      and len(assoc_last) > 0 
      ORDER BY assoc_last 
     </cfquery>  

<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="8"> 
    <cfoutput query="GetActiveEmps"> 
     <option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option> 
    </cfoutput> 
</select> 

<button id="add1" type="button">ADD ALL</button> 
<button id="rem1" type="button">REMOVE ALL</button> 

<textarea id="selected1" rows="7" readonly></textarea> 

<br /><br /> 

<label for="StartDate">From</label> 
<input type='text' name="StartDate" id="StartDate" value="" required/> 

<br /><br /> 

<label for="EndDate">To</label> 
<input type='text' name="EndDate" id="EndDate" value="" required/> 

<br /><br /> 

<label for="Format">Format</label> 
<select name="Format" required> 
    <option selected value="">Select Format</option> 
    <option value="print">Print</option> 
    <option value="pdf">Preview</option> 
    <option value="xls">Excel</option> 
</select> 

<br /><br /> 

<input type="submit" name="submit" value="Continue" /> 

</form> 
<script type="text/javascript"> 
// JS for Showing Chosen Locations in textarea 
var opts = document.querySelectorAll('#loc option'); 

document.getElementById('add').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = true; 
    } 

    reflectChange(); 
}); 

document.getElementById('rem').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = false; 
    } 

    reflectChange(); 
}); 

document.getElementById('loc').addEventListener('change', reflectChange); 

function reflectChange() { 
    document.getElementById('selected').value = ''; 

    for (var i=0; i<opts.length; i++) { 
     if(opts[i].selected) 
     document.getElementById('selected').value += opts[i].text+'\n'; 
    } 
} 

// End JS for Showing Chosen Locations in textarea 

// JS for Showing Chosen Associates in textarea 
var opts1 = document.querySelectorAll('#EmployeeName option'); 

document.getElementById('add1').addEventListener('click', function() { 
    for (var i=0; i<opts1.length; i++) { 
     opts1[i].selected = true; 
    } 

    reflectChange1(); 
}); 

document.getElementById('rem1').addEventListener('click', function() { 
    for (var i=0; i<opts1.length; i++) { 
     opts1[i].selected = false; 
    } 

    reflectChange1(); 
}); 

document.getElementById('EmployeeName').addEventListener('change', reflectChange1); 

function reflectChange1() { 
    document.getElementById('selected1').value = ''; 

    for (var i=0; i<opts1.length; i++) { 
     if(opts1[i].selected) 
     document.getElementById('selected1').value += opts1[i].text+'\n'; 
    } 
} 

// End JS for Showing Chosen Associates in textarea 
    </script>

Un grand nombre de ces champs sont les mêmes est-il un moyen que je peux juste avoir un ensemble et leur montrer si l'option est choisi et ne pas avoir deux ensembles différents?

Voici ce que j'ai essayé:

<select class="form-control" id="reporttype" name="reporttype"> 
    <option value="" selected="selected">Select Report</option> 
    <option id ="checklistreports" value="checklistreports" >Checklist Stats</option> 
    <option id ="locationreports" value="locationreports" >Location Stats</option> 
</select> 

<script> 
    $(document).on('change', '#reporttype', function() { 
     var value = $(this).val(); 

     //var checklistreport = $("#checklistreport"); 
     //var locationreport = $("#locationreport"); 
     var location = $("#location"); 
     var employeelist = $("#employeelist"); 
     var chosendates = $("#chosendates"); 
     var formattype = $("#formattype"); 
     var submitbtn = $("#submitbtn"); 

     if (value == "checklistreports") { 
      //checklistreport.show(); 
      //locationreport.hide(); 
      location.show(); 
      employeelist.show(); 
      chosendates.show(); 
      formattype.show(); 
      submitbtn.show(); 
     } else if (value == "locationreports") { 
      //checklistreport.hide(); 
      //locationreport.show(); 
      location.show(); 
      employeelist.hide(); 
      chosendates.show(); 
      formattype.show(); 
      submitbtn.show(); 
     } else { 
      //checklistreport.hide(); 
      //locationreport.hide(); 
      location.hide(); 
      employeelist.hide(); 
      chosendates.hide(); 
      formattype.hide(); 
      submitbtn.hide(); 
     } 
    }); 
</script> 
<br /><br /> 

<!--<div id="locationreport" style="display: none;">--> 
<form name="generatereport" method="post" action="_location_queries.cfm"> 
<!--<div id="checklistreport" style="display: none;">--> 
<form name="generatereport" method="post" action="_checklists_queries.cfm"> 




</form> 

<div id="location" style="display: none;"> 
<select name="Location" id="loc" multiple="multiple" required size="9"> 
    <option value="OPERATIONS">Operations</option> 
    <option value="CCC">Contact Center</option> 
    <option value="QA">QA Department</option> 
    <option value="DS">DeSoto</option> 
    <option value="PS">Palma Sola</option> 
    <option value="LWR">Lakewood Ranch</option> 
    <option value="NR">North River</option> 
    <option value="SDL">SDL</option> 
    <option value="FSC">FSC</option> 
</select> 

<button id="add" type="button">ADD ALL</button> 
<button id="rem" type="button">REMOVE ALL</button> 

<textarea id="selected" rows="10" readonly></textarea> 
    </div> 
<br /><br /> 

<div id="employeelist" style="display: none;"> 
     <cfquery name="GetActiveEmps" datasource="tco_associates"> 
      SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates 
      WHERE assoc_status = 'ACTIVE' 
      and assoc_last NOT LIKE 'Test%' 
      and len(assoc_last) > 0 
      ORDER BY assoc_last 
     </cfquery>  

<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9"> 
    <cfoutput query="GetActiveEmps"> 
     <option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option> 
    </cfoutput> 
</select> 

<button id="add1" type="button">ADD ALL</button> 
<button id="rem1" type="button">REMOVE ALL</button> 

<textarea id="selected1" rows="10" readonly></textarea> 
    </div> 
<br /><br /> 

<div id="chosendates" style="display: none;"> 
<label for="StartDate">From</label> 
<input type='text' name="StartDate" id="StartDate" value="" required/> 

<br /><br /> 

<label for="EndDate">To</label> 
<input type='text' name="EndDate" id="EndDate" value="" required/> 
    </div> 
<br /><br /> 

<div id="formattype" style="display: none;"> 
<label for="Format">Format</label> 
<select name="Format" required> 
    <option selected value="">Select Format</option> 
    <option value="print">Print</option> 
    <option value="pdf">Preview</option> 
    <option value="xls">Excel</option> 
</select> 
    </div> 
<br /><br /> 

<div id="submitbtn" style="display: none;"> 
<input type="submit" name="submit" value="Continue" /> 
    </div> 
</form> 

<script type="text/javascript"> 
// JS for Showing Chosen Locations in textarea 
var opts = document.querySelectorAll('#loc option'); 

document.getElementById('add').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = true; 
    } 

    reflectChange(); 
}); 

document.getElementById('rem').addEventListener('click', function() { 
    for (var i=0; i<opts.length; i++) { 
     opts[i].selected = false; 
    } 

    reflectChange(); 
}); 

document.getElementById('loc').addEventListener('change', reflectChange); 

function reflectChange() { 
    document.getElementById('selected').value = ''; 

    for (var i=0; i<opts.length; i++) { 
     if(opts[i].selected) 
     document.getElementById('selected').value += opts[i].text+'\n'; 
    } 
} 

// End JS for Showing Chosen Locations in textarea 

// JS for Showing Chosen Associates in textarea 
var opts1 = document.querySelectorAll('#EmployeeName option'); 

document.getElementById('add1').addEventListener('click', function() { 
    for (var i=0; i<opts1.length; i++) { 
     opts1[i].selected = true; 
    } 

    reflectChange1(); 
}); 

document.getElementById('rem1').addEventListener('click', function() { 
    for (var i=0; i<opts1.length; i++) { 
     opts1[i].selected = false; 
    } 

    reflectChange1(); 
}); 

document.getElementById('EmployeeName').addEventListener('change', reflectChange1); 

function reflectChange1() { 
    document.getElementById('selected1').value = ''; 

    for (var i=0; i<opts1.length; i++) { 
     if(opts1[i].selected) 
     document.getElementById('selected1').value += opts1[i].text+'\n'; 
    } 
} 

// End JS for Showing Chosen Associates in textarea 
    </script>

Je ne sais pas comment je choisirai action pour la forme. Selon le rapport choisi.

https://jsfiddle.net/bobrierton/o2gxgz9r/10018/

Source

2017-07-12 David Brierton

Vous pouvez placer des sélections/options communes dans des fichiers '.cfm' séparés et les inclure. Une autre option serait d'utiliser [''] (https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-mo/cfmodule.html), de fournir le type de formulaire comme attribut et de changer le champs dans le module. – Alex

Est-il possible de faire comme des composants peut-être en utilisant JavaScript ou plus? –

Si vous voulez/pouvez le faire sur le côté client, jetez un coup d'œil à [HTML5

Ne vous répétez pas les meilleures pratiques en montrant et en masquant les champs

Répondre

Questions connexes