Error adding dynamic inputs

0

I have a problem trying to make a sum in dynamic inputs, my code is as follows

<?php
  require '../api/conection.php';
  $objEst = new DataBase();

  $sth = $objEst->prepare('SELECT nombreObra FROM contrato');
  $sth->execute();
  $result = $sth->fetchAll();

  if(isset($_GET['opcion'])){
    $sth2 = $objEst->prepare('SELECT * FROM contrato WHERE nombreObra = :dato');
    $sth2->bindParam(':dato', $_GET['opcion']);
    $sth2->execute();
    $result2 = $sth2->fetchAll();    

    $sth3 = $objEst->prepare('SELECT * FROM presupuestos WHERE nombreObra = :dato2');
    $sth3->bindParam(':dato2', $_GET['opcion']);
    $sth3->execute();
    $result3 = $sth3->fetchAll(); 

    $sth4 = $objEst->prepare('SELECT noEst FROM estimaciones WHERE nombreObra = :dato3');
    $sth4->bindParam(':dato3', $_GET['opcion']);
    $sth4->execute();
    $result4 = $sth4->fetchAll();

    if($result4){
      $sth5 = $objEst->prepare('SELECT MAX(noEst) FROM estimaciones WHERE nombreObra = :dato4');
      $sth5->bindParam(':dato4', $_GET['opcion']);
      $sth5->execute();
      $result5 = $sth5->fetchColumn();
      if($result5 <= 1){
        $noest = $result5;
      }else{
        $noest = $result5+1;
      }

    }else{
      $noest = 1;
    }

  }
?>
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>OBRAS PUBLICAS 2017</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">   
  </head> 
  <script type="text/javascript">
  var opcion = "";
    function buscar(){
      opcion = document.getElementById('obra').value; 
      window.location.href = 
      'http://localhost:8888/base2/partials/estimacion.php?opcion='+opcion;

      
  }
    }
    function calcula(ele) {
      var antes = 0, pres = 0, excedente = 0;
      var tr = ele.parentNode.parentNode;
      var nodes = tr.childNodes;
      for (var x=0; x<nodes.length;x++) {
        if (nodes[x].firstChild.name == 'antes[]'){
         antes = parseFloat(nodes[x].firstChild.value,10);
        }
        if (nodes[x].firstChild.name == 'pres[]'){
         pres = parseFloat(nodes[x].firstChild.value,10);
        }
       if (nodes[x].firstChild.name == 'excedente[]'){
         excedente = parseFloat((anterior)*(presente),10);
         nodes[x].firstChild.value = excedente;
       }
    }
  } 
  </script> 
  <body>
    <div class="container">     
      <div class="row">
        <div class="col-xs-12">         
            <br>                  
            <h3 style="text-align:center;" class="modal-title">BOLETA DE ESTIMACION</h3>
            <a href="http://localhost:8888/base2/" type="button" class="btn btn-default btn-sm">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Inico
            </a>
            <a style="float: right;" href="estimacion.php" type="button" class="btn btn-default btn-sm">
              <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> Selecciona otra Obra
            </a>
            <div class="modal-body">
              <form action="api/estimacion.php" id="boleta" method="POST">
                <div class="col-sm-12">
                  <label for="datos">Selecciona una Obra</label>                  
                  <select id='obra' onchange="return buscar();" class="form-control" required="true">                    
                    <?php
                      if(isset($_GET['opcion'])){                      
                          echo "<option value=".$_GET['opcion']." > ". $_GET['opcion']."</option>";
                      }else{?>
                        <option value=""></option> <?php
                        foreach ($result as $key => $value) {
                          echo "<option value='".$value['nombreObra']."'> ". $value['nombreObra']."</option>";
                        }
                      }                      
                    ?>  
                  </select>
                  <br>  
                </div>
                <div class="col-sm-12">
                  <div class="panel panel-default">
                    <div class="panel-heading">Datos de Obra</div>
                      <div class="panel-body">
                      <?php 
                        if(isset($_GET['opcion'])){?>
                          <div class="form-group col-sm-7">
                            <label for="numObra_Con">Nombre de Obra</label>
                            <input type="text" name="nombreObra2" value="<?php echo $result2[0]['nombreObra']; ?>" class="form-control" readonly >
                          </div>
                          <div class="form-group col-sm-2">
                            <label for="numObra_Con">No. Estimacion</label>
                            <input type="text" name="noEstimacion" value="<?php echo $noest;?>"  class="form-control" ng-model="noEstimacion" readonly>
                          </div>
                         <div class="form-group col-sm-3">
                          <label for="numObra_Con">Fecha Estimacion</label>
                          <input type="date" name="fechaEstimacion" class="form-control" ng-model="fechaEstimacion">
                         </div>
                         <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Obra</label>
                          <input type="text" name="noObra2" class="form-control" value="<?php echo $result2[0]['numObra']; ?>" ng-model="nombreObra2.numObra" readonly >
                         </div>  
                         <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Contrato</label>
                          <input type="text" name="noContrato2" class="form-control" value="<?php echo $result2[0]['numCon']; ?>" ng-model="nombreObra2.numCon" readonly >
                        </div>  
                        <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Oficio</label>
                          <input type="text" name="noOficio2" class="form-control" value="<?php echo $result2[0]['numOficio']; ?>" ng-model="nombreObra2.numOficio" readonly >
                        </div>  
                        <div class="form-group col-sm-3">
                          <label for="numObra_Con">Importe de Obra</label>
                          <input type="text" name="importe2" class="form-control" value="<?php echo '$'.$result2[0]['monto']; ?>" ng-model="nombreObra2.monto | currency" readonly >
                        </div>  
                          <?php
                        }else{?>
                          <div class="form-group col-sm-8">
                            <label for="numObra_Con">Nombre de Obra</label>
                            <input type="text" name="nombreObra2" class="form-control" readonly >
                          </div>
                        <div class="form-group col-sm-2">
                          <label for="numObra_Con">No. Estimacion</label>
                          <input type="text" name="noEstimacion" class="form-control" ng-model="noEstimacion">
                        </div>
                        <div class="form-group col-sm-2">
                          <label for="numObra_Con">Fecha Estimacion</label>
                          <input type="date" name="fechaEstimacion" class="form-control" ng-model="fechaEstimacion">
                         </div>
                         <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Obra</label>
                          <input type="text" name="noObra2" class="form-control" ng-model="nombreObra2.numObra" readonly >
                         </div>  
                         <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Contrato</label>
                          <input type="text" name="noContrato2" class="form-control" ng-model="nombreObra2.numCon" readonly >
                        </div>  
                        <div class="form-group col-sm-3">
                          <label for="numObra_Con">No. de Oficio</label>
                          <input type="text" name="noOficio2" class="form-control" ng-model="nombreObra2.numOficio" readonly >
                        </div>  
                        <div class="form-group col-sm-3">
                          <label for="numObra_Con">Importe de Obra</label>
                          <input type="text" name="importe2" class="form-control" ng-model="nombreObra2.monto | currency" readonly >
                        </div>                 
                        
                      <?php
                        }
                      ?>                
                        </div>
                    </div>  
                  </div><br>    
                  <div id="contenedor" style="paddding: 0; width:100%;">
                    <table id="tabla" class="table table-bordered">
                      <thead>
                        <tr>
                          <th COLSPAN="2">PARTIDAS APROBADAS</th>
                          <th COLSPAN="4">PRESUPUESTO CONTRATADO</th>
                          <th COLSPAN="3">VOLUMEN ACUMULADO</th>
                          <th rowspan="2">EXCEDENTE</th>
                          <th rowspan="2">IMPORTE ESTIMADO</th>
                        </tr>    
                        <tr>
                          <td class="col-sm-1">CLAVE</td>
                          <td class="col-sm-3">CONCEPTO</td>
                          <td>UNIDAD</td>
                          <td class="col-sm-2">PRECIO U</td>
                          <td>CANTIDAD</td>
                          <td class="col-sm-2">IMPORTE</td>
                          <td>ANTERIOR</td>
                          <td>PRESENTE</td>
                          <td>ACUMULADO</td>
                        </tr>                    
                      </thead>                    
                      <tbody>
                        <?php
                          if(isset($_GET['opcion'])){
                            foreach ($result3 as $key => $value2) {
                              ?>
                              <tr><td><input type="text" value="<?php echo $result3[$key]['clave'] ?>" class="form-control" name="clave[]"  readonly></td>
                              <td roswpan="2"><input type="text" value="<?php echo $result3[$key]['concepto'] ?>" class="form-control" name="concepto[]" readonly><br><textarea name="descripcion[]" value="<?php print_r($result3[$key]['descripcion'])?>" rows="3" class="form-control" readonly><?php print_r($result3[$key]['descripcion'])?></textarea></td>
                              <td><input type="text" class="form-control" name="unidad[]" value="<?php echo $result3[$key]['unidad']; ?>" readonly></td>
                              <td><input type="text" class="form-control" name="precioU[]" value="<?php echo $result3[$key]['precioU']; ?>"  readonly></td>
                              <td><input type="text" class="form-control" name="cantidad[]" value="<?php echo $result3[$key]['cantidad']; ?>"></td>
                              <td><input type="text" class="form-control" name="totalParcial[]" value="<?php echo $result3[$key]['totalParcial']; ?>" readonly></td>
                              <td><input type="text" class="form-control" onchange="calcula(this);" name="antes[]" value="0"></td>
                              <td><input type="text" class="form-control" onchange="calcula(this);" name="pres[]" value="0"></td>
                              <td><input type="text" class="form-control" value="0" name="acumulado[]"></td>
                              <td><input type="text" class="form-control" value="0" name="excedente[]"></td>
                              <td><input type="text" class="form-control" name="importeEstimacion[]"></td></tr>
                            <?php }                     

                          }else{?>
                            <tr><td><input type="text" value="" class="form-control" name="clave[]"  readonly></td>
                              <td roswpan="2"><input type="text" value="" class="form-control" name="concepto[]" readonly><br><textarea name="descripcion[]" value="" rows="3" class="form-control" readonly></textarea></td>
                              <td><input type="text" class="form-control" name="unidad[]" value="" readonly></td>
                              <td><input type="text" class="form-control" name="precioU[]" value=""  readonly></td>
                              <td><input type="text" class="form-control" name="cantidad[]" value=""></td>
                              <td><input type="text" class="form-control" onchange="return calcula(this);" name="antes" value="0"></td>
                              <td><input type="text" class="form-control" onchange="return calcula(this);" name="pres" value="0"></td>
                              <td><input type="text" class="form-control" value="0" name="acumulado[]"></td>
                              <td><input type="text" class="form-control" value="0" name="excedente[]"></td>
                              <td><input type="text" class="form-control" name="importeEstimacion[]"></td></tr>
                          <?php 
                        }
                        ?>
                      </tbody>                      
                    </table>  
                  <div></div>                      
                </div>
              <input type="submit" id="btn" name="insertar2" value="Enviar" />
            </form>
          </div>                 
        </div>
      </div>
    </div>    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Where after making the first query from the select, it brings the information from the database where it creates and fills the inputs from that information, but when I try to make the onchange it is the dynamic fields before [] and pres [] returns an error to me

"estimate.php? option = Bridgework: 31 Uncaught TypeError: Can not read property 'name' of null     at calcula (estimate.php? option = bridgework: 31)     at HTMLInputElement.onchange (estimate.php? option = bridgework: 130) "

I did tests and if it enters the for but the error marks me as the next img and I can not find a solution ....

    
asked by Carlos Mendoza 24.09.2017 в 17:04
source

1 answer

0

From what I see of the error you should first check if firstChild exists, since there may be iterations in the for where it does not exist but still check the 3 if within the for so that if it does not exist no there is property name . Try putting this inside the function calculate and see if it works:

function calcula(ele) {
      var antes = 0, pres = 0, excedente = 0;
      var tr = ele.parentNode.parentNode;
      var nodes = tr.childNodes;
      for (var x=0; x<nodes.length;x++) {
        if (nodes[x].firstChild){
            if (nodes[x].firstChild.name == 'antes[]'){
               antes = parseFloat(nodes[x].firstChild.value,10);
            }
            if (nodes[x].firstChild.name == 'pres[]'){
               pres = parseFloat(nodes[x].firstChild.value,10);
            }
            if (nodes[x].firstChild.name == 'excedente[]'){
               excedente = parseFloat((anterior)*(presente),10);
               nodes[x].firstChild.value = excedente;
            }
        }
    }
    
answered by 24.09.2017 / 17:23
source