Simplification de code

Simplification de code - HTML/CSS - Programmation

Marsh Posté le 15-05-2012 à 17:54:47    

Bonjour,
 
Je tourne en rond depuis quelque semaine, étant débutant en javascript je ne sais pas trop comment faire.
Le code ci-dessous fonctionne mais peut rapidement devenir long ^^'.
J'aurai tant voulu simplifier ces quelques lignes.
Mais je n'y arrive pas.
Pourriez-vous m'aider ?

 
<script type="text/javascript">
var persnpax_yes = document.securpolicy.persnpax[0];
 var persnpax_no = document.securpolicy.persnpax[1];
 
 var ecologic_yes = document.securpolicy.ecologic[0];
 var ecologic_no = document.securpolicy.ecologic[1];
 
 var economic_yes = document.securpolicy.economic[0];
 var economic_no = document.securpolicy.economic[1];
 
 var reputation_yes = document.securpolicy.reputation[0];
 var reputation_no = document.securpolicy.reputation[1];
 
 var flag_yes = document.securpolicy.flag[0];
 var flag_no = document.securpolicy.flag[1];
 
 var symbolic_yes = document.securpolicy.symbolic[0];
 var symbolic_no = document.securpolicy.symbolic[1];
 
 var damagesite_yes = document.securpolicy.damagesite[0];
 var damagesite_no = document.securpolicy.damagesite[1];
 
 persnpax_yes.onclick = function() {
 document.getElementById("add_persnpax" ).style.display = "block"
 };
 persnpax_no.onclick = function() {
 document.getElementById("add_persnpax" ).style.display = "none"
 };
 
 ecologic_yes.onclick = function() {
 document.getElementById("add_ecologic" ).style.display = "block"
 };
 ecologic_no.onclick = function() {
 document.getElementById("add_ecologic" ).style.display = "none"
 };
 
 economic_yes.onclick = function() {
 document.getElementById("add_economic" ).style.display = "block"
 };
 economic_no.onclick = function() {
 document.getElementById("add_economic" ).style.display = "none"
 };
 
 reputation_yes.onclick = function() {
 document.getElementById("add_reputation" ).style.display = "block"
 };
 reputation_no.onclick = function() {
 document.getElementById("add_reputation" ).style.display = "none"
 };
 
 flag_yes.onclick = function() {
 document.getElementById("add_flag" ).style.display = "block"
 };
 flag_no.onclick = function() {
 document.getElementById("add_flag" ).style.display = "none"
 };
 
 symbolic_yes.onclick = function() {
 document.getElementById("add_symbolic" ).style.display = "block"
 };
 symbolic_no.onclick = function() {
 document.getElementById("add_symbolic" ).style.display = "none"
 };
 
 damagesite_yes.onclick = function() {
 document.getElementById("add_damagesite" ).style.display = "block"
 };
 damagesite_no.onclick = function() {
 document.getElementById("add_damagesite" ).style.display = "none"
 };
 
 if(document.getElementById('persnpax_yes').checked == true){
  document.getElementById('add_persnpax').style.display = 'block';
 }else{
  document.getElementById('add_persnpax').style.display = 'none';
 }
 
 if(document.getElementById('ecologic_yes').checked == true){
  document.getElementById('add_ecologic').style.display = 'block';
 }else{
  document.getElementById('add_ecologic').style.display = 'none';
 }
 
 if(document.getElementById('economic_yes').checked == true){
  document.getElementById('add_economic').style.display = 'block';
 }else{
  document.getElementById('add_economic').style.display = 'none';
 }
 
 if(document.getElementById('reputation_yes').checked == true){
  document.getElementById('add_reputation').style.display = 'block';
 }else{
  document.getElementById('add_reputation').style.display = 'none';
 }
 
 if(document.getElementById('flag_yes').checked == true){
  document.getElementById('add_flag').style.display = 'block';
 }else{
  document.getElementById('add_flag').style.display = 'none';
 }
 
 if(document.getElementById('symbolic_yes').checked == true){
  document.getElementById('add_symbolic').style.display = 'block';
 }else{
  document.getElementById('add_symbolic').style.display = 'none';
 }
 
 if(document.getElementById('damagesite_yes').checked == true){
  document.getElementById('add_damagesite').style.display = 'block';
 }else{
  document.getElementById('add_damagesite').style.display = 'none';
 }
</script>
 
 
Ce que j'imagine est quelque chose comme cela
 
function XXX(name){
        var name_yes = document.securpolicy.name[0];
 var name_no = document.securpolicy.name[1];
 
 name_yes.onclick = function() {
 document.getElementById("add_name" ).style.display = "block"
 };
 name_no.onclick = function() {
 document.getElementById("add_name" ).style.display = "none"
 };
 
        if(document.getElementById('name_yes').checked == true){
  document.getElementById('add_name').style.display = 'block';
 }else{
  document.getElementById('add_name').style.display = 'none';
 }
}
 
 
 
Voila les fonction pour afin de simplifier un peu le formulaire donc si on peut faire un fusion des deux cela serait encore mieux ^^.
 
function yes_no($name1){
  echo '<input type="radio" name="'.$name1.'" value="'.$name1.'_yes" id="'.$name1.'_yes"';
  if (isset($_POST[$name1])){  
   if ($_POST[$name1] == $name1.'_yes'){  
    echo "checked";  
   }  
  }
  echo '/><label for="'.$name1.'_yes">'._YES.'</label></br>
  <input type="radio" name="'.$name1.'" value="'.$name1.'_no" id="'.$name1.'_no"';
  if (isset($_POST[$name1])){  
   if ($_POST[$name1] == $name1.'_no'){  
    echo "checked";  
   }  
  }
  echo '/><label for="'.$name1.'_no">'._NO.'</label></br>';
 }
 
function choix($name1,$name2){
  echo '<input type="radio" name="'.$name1.'_'.$name2.'" value="'.$name1.'_'.$name2.'_cata" id="'.$name1.'_'.$name2.'_cata"';
  if (isset($_POST[$name1.'_'.$name2])){  
   if ($_POST[$name1.'_'.$name2] == $name1.'_'.$name2.'_cata'){  
    echo "checked";  
   }  
  }
  echo'/><label for="'.$name1.'_'.$name2.'_cata">'._CATA.'</label></br>
  <input type="radio" name="'.$name1.'_'.$name2.'" value="'.$name1.'_'.$name2.'_sign" id="'.$name1.'_'.$name2.'_sign"';
  if (isset($_POST[$name1.'_'.$name2])){  
   if ($_POST[$name1.'_'.$name2] == $name1.'_'.$name2.'_sign'){  
    echo "checked";  
   }  
  }
  echo'/><label for="'.$name1.'_'.$name2.'_sign">'._SIGN.'</label></br>
  <input type="radio" name="'.$name1.'_'.$name2.'" value="'.$name1.'_'.$name2.'_mod" id="'.$name1.'_'.$name2.'_mod"';
  if (isset($_POST[$name1.'_'.$name2])){  
   if ($_POST[$name1.'_'.$name2] == $name1.'_'.$name2.'_mod'){  
    echo "checked";  
   }  
  }
  echo'/><label for="'.$name1.'_'.$name2.'_mod">'._MOD.'</label></br>
  <input type="radio" name="'.$name1.'_'.$name2.'" value="'.$name1.'_'.$name2.'_unimp" id="'.$name1.'_'.$name2.'_unimp"';
  if (isset($_POST[$name1.'_'.$name2])){  
   if ($_POST[$name1.'_'.$name2] == $name1.'_'.$name2.'_unimp'){  
    echo "checked";  
   }  
  }
  echo' /><label for="'.$name1.'_'.$name2.'_unimp">'._UNIMP.'</label></br>';
 }
 
 
 
Et voila le formulaire avec le style css
 
<style type="text/css">
 #add_persnpax, #add_ecologic, #add_economic, #add_reputation, #add_flag, #add_symbolic, #add_damagesite{  
  display: none;  
 }
</style>
<h1>Security policy</h1>
<form class="survey" name="securpolicy" method="post" action="<?php echo Router::url('pages/membre_index/survey/securitypolicy');?>">
 <p><strong><?php echo _PSP1?></strong></p>
 <h3><?php echo _PSP2?></h3>
 
 <p><?php echo _PSP3?><br />
    <?php $this->Form->yes_no('persnpax');?>
 </p>
       
<div id="add_persnpax" class="main">
 <p><?php echo _PSP4?><br /><?php echo _PSP5?></p>
 <table>
     <tr>
      <td>
       <table>
        <caption><?php echo _PSP6?></caption>
        <tr>
         <th></th>
         <th><?php echo _PASSEN?></th>
         <th><?php echo _CREW?></th>
         <th><?php echo _LOCPO?></th>
        </tr>
        <tr>
         <th><?php echo _MOD?></th>
         <td><input type="text" name="injumodpax" /></td>
         <td><input type="text" name="injumodcrew" /></td>
         <td><input type="text" name="injumodlocpop" /></td>            
        </tr>
        <tr>
         <th><?php echo _SIGN?></th>
         <td><input type="text" name="injusignpax" /></td>
         <td><input type="text" name="injusigncrew" /></td>
         <td><input type="text" name="injusignlocpop" /></td>  
        </tr>
        <tr>
         <th><?php echo _CATA?></th>
         <td><input type="text" name="injucatapax" /></td>
         <td><input type="text" name="injucatacrew" /></td>
         <td><input type="text" name="injucatalocpop" /></td>  
        </tr>
    </table>
   </td>
   <td>
    <table>
        <caption><?php echo _PSP7?></caption>
        <tr>
         <th></th>
         <th><?php echo _PASSEN?></th>
         <th><?php echo _CREW?></th>
         <th><?php echo _LOCPO?></th>
        </tr>
        <tr>
         <th><?php echo _MOD?></th>
         <td><input type="text" name="deadmodpax" /></td>
         <td><input type="text" name="deadmodcrew" /></td>
         <td><input type="text" name="deadmodlocpop" /></td>  
        </tr>
        <tr>
         <th><?php echo _SIGN?></th>
         <td><input type="text" name="deadsignpax" /></td>
         <td><input type="text" name="deadsigncrew" /></td>
         <td><input type="text" name="deadsignlocpop" /></td>  
        </tr>
        <tr>
         <th><?php echo _CATA?></th>
         <td><input type="text" name="deadcatapax" /></td>
         <td><input type="text" name="deadcatacrew" /></td>
         <td><input type="text" name="deadcatalocpop" /></td>  
        </tr>
    </table>
   </td>
  </tr>
 </table>
</div>
 
<p> <?php echo _PSP8?><br />
 <?php $this->Form->yes_no('ecologic');?>
</p>
 
<div id="add_ecologic" class="main">
 <p><?php echo _PSP9?></p>
 <p><?php echo _PSP10?><br />
    <?php $this->Form->choix('ecologic','mod');?>
 </p>
 <p> <?php echo _PSP11?><br />
  <?php $this->Form->choix('ecologic','sign');?>
 </p>
 <p><?php echo _PSP12?><br />
  <?php $this->Form->choix('ecologic','cata');?>
 </p>
</div>
       
<p><?php echo _PSP13?><br />
 <?php $this->Form->yes_no('economic');?>
</p>
   
<div id="add_economic" class="main">
 <p><?php echo _PSP14?><br /><?php echo _PSP15?></p>
 <table>
  <tr>
      <th><?php echo _CATA?>:</th>
       <td><input type="text" name="economic_cata" /> $</td>
  </tr>
  <tr>
      <th><?php echo _SIGN?>:</th>
       <td><input type="text" name="economic_sign" /> $</td>
  </tr>
  <tr>
      <th><?php echo _MOD?>:</th>
        <td><input type="text" name="economic_mod" /> $</td>
   </tr>
 </table>
</div>
       
<p><?php echo _PSP16?><br />
   <?php $this->Form->yes_no('reputation');?>
</p>
       
<div id="add_reputation" class="main">
 <p><?php echo _PSP17?></p>
       
 <p><?php echo _PSP18?><br />
  <?php $this->Form->choix('reput','bypax');?>
 </p>
             
 <p><?php echo _PSP19?><br />
    <?php $this->Form->choix('reput','bypartners');?>
 </p>
       
 <p><?php echo _PSP20?><br />
    <?php $this->Form->choix('reput','regmedia');?>
 </p>
       
 <p><?php echo _PSP21?><br />
  <?php $this->Form->choix('reput','natmedia');?>
 </p>
             
 <p><?php echo _PSP22?><br />
  <?php $this->Form->choix('reput','internatmedia');?>
 </p>
</div>
 
<p><?php echo _PSP23?><br />
   <?php $this->Form->yes_no('flag');?>
</p>
       
<div id="add_flag" class="main">
 <p><?php echo _PSP24?></p>
       
 <p><?php echo _PSP25?><br />
    <?php $this->Form->choix('disstate','loc');?>
 </p>
             
 <p><?php echo _PSP26?><br />
  <?php $this->Form->choix('disstate','nat');?>
 </p>
       
 <p><?php echo _PSP27?><br />
    <?php $this->Form->choix('disstate','internat');?>
 </p>
       
 <p><?php echo _PSP28?><br />
  <?php $this->Form->choix('detstate','loc');?>
 </p>
             
 <p><?php echo _PSP29?><br />
    <?php $this->Form->choix('detstate','nat');?>
 </p>
       
 <p><?php echo _PSP30?><br />
    <?php $this->Form->choix('detstate','internat');?>
 </p>
</div>
       
 <p><?php echo _PSP31?><br />
    <?php $this->Form->yes_no('symbolic');?>
 </p>
       
<div id="add_symbolic" class="main">
 <p><?php echo _PSP32?></p>
       
 <p><?php echo _PSP33?><br />
    <?php $this->Form->choix('detsymb','');?>
 </p>
             
 <p><?php echo _PSP34?><br />
    <?php $this->Form->choix('destrusymb','');?>
 </p>
       
 <p><?php echo _PSP35?><br />
    <?php $this->Form->choix('detsymb','country');?>
 </p>
       
 <p><?php echo _PSP36?><br />
    <?php $this->Form->choix('destrusymb','country');?>
 </p>
</div>
       
<p><?php echo _PSP37?><br />
   <?php $this->Form->yes_no('damagesite');?>
</p>
       
<div id="add_damagesite" class="main">
 <p><?php echo _PSP38?></p>
       
 <p><?php echo _PSP39?><br />
    <?php $this->Form->choix('dis','firm');?>
 </p>
             
 <p><?php echo _PSP40?><br />
    <?php $this->Form->choix('dis','town');?>
 </p>
       
 <p><?php echo _PSP41?><br />
    <?php $this->Form->choix('dis','county');?>
 </p>
</div>
       
 <input type="submit" value="<?php echo _VPSP?>" />
 <a href="<?php echo Router::url('pages/membre_index');?>"> <input type="button" name="bt_home" value="<?php echo _HOME?>"/> </a>
</form>
 
 
 
Merci de l'aide que vous pourrez m'apportez langue (de la part d'un petit nooby )

Reply

Marsh Posté le 15-05-2012 à 17:54:47   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed