How to block inputs with js, according to comparisons of dates made in php? Only block the first inputs of the first record

Navigation
1
if( ($date >= $fecha_inicioP1) && ($date < $fecha_finP1 ) )
{
  echo "<br>";
  echo "bloquea todos los inputs menos el de primer periodo";
  //bloquear inputs de los demas parciales
?>

<script type="text/javascript">
  window.onload=function() {
    document.getElementById('p2').disabled=true;  
    document.getElementById('ip2').disabled=true;
    document.getElementById('p3').disabled=true;
    document.getElementById('ip3').disabled = true;
  }

</script>


<?php


} elseif( ($date >= $fecha_inicioP2) && ($date < $fecha_finP2 ) )
      {
        echo "<br>";
        echo "bloquea todos los inputs menos el de segundo periodo";

        ?>

    <script type="text/javascript">
      window.onload=function() {
      document.getElementById('p1').disabled=true;
      document.getElementById('ip1').disabled=true;
      document.getElementById('p3').disabled=true;
      document.getElementById('ip3').disabled=true;
     }
    </script>

        <?php

       }  //fin elseif

       elseif( ($date >= $fecha_inicioP3) && ($date < $fecha_finP3 ) )
       {
         echo "<br>";
         echo "bloquea todos los inputs menos el de tercer periodo";

         ?>

          <script type="text/javascript">
           window.onload=function() {
           document.getElementById('p1').disabled=true;
           document.getElementById('ip1').disabled=true;
           document.getElementById('p2').disabled=true;
           document.getElementById('ip2').disabled=true;
           document.getElementById('final').disabled=true;
           }
           </script>
        <?php 
         } 
         ?>


//inputs que contienen valores de un foreach: por cada registro iterado aparecen inputs en fila, pero solo bloque los inputs del primer registro
          <td><input type="text" name="parcialP1[]" id="p1" size="3" value="<?php echo $alumno[2]; ?>" ></td>
          <td><input type="text" name="parcialP1[]" id="ip1" size="3" value="<?php echo $alumno[3]; ?>" ></td>
          <td><input type="text" name="parcialP2[]" id="p2" size="3" value="<?php echo $alumno[4]; ?>" ></td>
          <td><input type="text" name="parcialP2[]" id="ip2" size="3" value="<?php echo $alumno[5]; ?>" ></td>
          <td><input type="text" name="parcialP3[]" id="p3" size="3" value="<?php echo $alumno[8]; ?>" ></td>
          <td><input type="text" name="parcialP3[]" id="ip3" size="3" value="<?php echo $alumno[9]; ?>" ></td>
          <td><input type="text" name="final[]" id="final" size="3" value="<?php echo $alumno[11]; ?>" readonly ></td>

? >

    
asked by Armando Arellano 03.11.2016 в 05:59
source

1 answer

2
  

The document.getElementById('X') function finds 1 single element with id X , since only deberia haber uno . In other words, each of the iterated logs should generate inputs con ids únicos .

A solution to your problem would be to use document.getElementsByClassName , for example: 

function desactivarParciales(parciales) {
  var i,
      inputs,
      inputsTotal,
      inputsIndex;

  for (i = 0; i < parciales.length; i++) {
    inputs = document.getElementsByClassName(parciales[i]);
    inputsIndex = 0;
    inputsTotal = inputs.length;

    for(inputsIndex; inputsIndex < inputsTotal; inputsIndex++) {
      inputs[inputsIndex].disabled = true;
    }
  }
}
<table>
  <thead>
    <tr>
      <th>
        Alumno
      </th>
      <th>
        P1
      </th>
      <th>
        IP1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Juan P.
      </td>
      <td>
        <input type="text" name="parcialP1[]" class="p1" size="3" value="4"/>
      </td>
      <td>
        <input type="text" name="parcialP1[]" class="ip1" size="3" value="5"/>
      </td>
    </tr>
    <tr>
      <td>
        Pedro S.
      </td>
      <td>
        <input type="text" name="parcialP1[]" class="p1" size="3" value="9"/>
      </td>
      <td>
        <input type="text" name="parcialP1[]" class="ip1" size="3" value="8"/>
      </td>
    </tr>
  </tbody>
</table>
<button type="button" onclick="desactivarParciales(['p1'])">Desactivar P1</button>

Applying this to your code could look like this: 

<?php
if (($date >= $fecha_inicioP1) && ($date < $fecha_finP1)) {
  echo "<br>";
  echo "bloquea todos los inputs menos el de primer periodo";
  //bloquear inputs de los demas parciales
?>
<script type = "text/javascript">
window.onload = function() {
    desactivarParciales(['p2', 'ip2', 'p3', 'ip3']);
}
</script>
<?php
} elseif( ($date >= $fecha_inicioP2) && ($date < $fecha_finP2 ) ) {
  echo "<br>";
  echo "bloquea todos los inputs menos el de segundo periodo";
?>
<script type = "text/javascript" >
window.onload = function() {
    desactivarParciales(['p1', 'ip1', 'p3', 'ip3']);
}
</script>
<?php
} elseif( ($date >= $fecha_inicioP3) && ($date < $fecha_finP3 ) ) {
  echo "<br>";
  echo "bloquea todos los inputs menos el de tercer periodo";
?>
<script type = "text/javascript" >
window.onload = function() {
  desactivarParciales(['p1', 'ip1', 'p2', 'ip2', 'final']);
}
</script>
<?php 
}
?>

//inputs que contienen valores de un foreach: por cada registro iterado aparecen inputs en fila, pero solo bloque los inputs del primer registro
  <td><input type="text" name="parcialP1[]" class="p1" size="3" value="<?php echo $alumno[2]; ?>" ></td>
  <td><input type="text" name="parcialP1[]" class="ip1" size="3" value="<?php echo $alumno[3]; ?>" ></td>
  <td><input type="text" name="parcialP2[]" class="p2" size="3" value="<?php echo $alumno[4]; ?>" ></td>
  <td><input type="text" name="parcialP2[]" class="ip2" size="3" value="<?php echo $alumno[5]; ?>" ></td>
  <td><input type="text" name="parcialP3[]" class="p3" size="3" value="<?php echo $alumno[8]; ?>" ></td>
  <td><input type="text" name="parcialP3[]" class="ip3" size="3" value="<?php echo $alumno[9]; ?>" ></td>
  <td><input type="text" name="final[]" class="final" size="3" value="<?php echo $alumno[11]; ?>" readonly ></td>
    
answered by 03.11.2016 / 13:44
source
"Namespace 'TagsEditText' is not bound" but when replacing it with app everything is correct How can I traverse an html table as if it were a coordinate table?