0

actualmente tengo dos problemáticas con estas funciones .js, el problema es lo siguiente: si le agrego la etiqueta <form class="col s12 m12 l12" action="anadircarrerascaballos.php" name="form" method="POST">, no me funciona la función total, pero si se la quito me funciona perfectamente y mi ultimo problema es que a partir del input agregado que seria el 5,6,7,8 hasta el 14 no me hace el calculo del dividendo x el porcentaje y no muestra el total.

formulario

<form class="col s12 m12 l12" action="anadircarrerascaballos.php" name="form" method="POST">
<div class="row">

  <div class='input-field col s12 m4'>
    <input id='icon_email' class="black-text" type='text' name='fecha_carreras' 
    value='<?php echo date('d/m/Y');?>'  readonly/>
    <label for='titulo' class='black-text'>Fecha:</label>
  </div>
  <div class='input-field col s12 m4'>
    <input id='icon_email' class="black-text timepicker" type='text' name='hora_carreras' autocomplete='off' required/>
    <label for='titulo' class='black-text'>Hora:</label>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_carreras" id="id_carreras" required>
      <option value="" disabled selected>Carreras:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM carreras  ORDER BY id_carreras");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_carreras'] ;?>"><?php echo $linea['carreras'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_dias" id="id_dias" required>
      <option value="" disabled selected>Días:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM dias  ORDER BY id_dias");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_dias'] ;?>"><?php echo $linea['dias'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_distancia_carreras" id="id_distancia_carreras" required>
      <option value="" disabled selected>Distancia Carreras:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM distancia_carrera  ORDER BY id_distancia_carrera");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_distancia_carrera'] ;?>"><?php echo $linea['distancia_carrera'] ;?> Mtros</option>
      <?php
      }
      ?>
    </select>
  </div>
  <div class='input-field col s12 m4'>
    <select name="id_hipodromo" id="id_hipodromo" required>
      <option value="" disabled selected>Hipódromos:</option>
      <?php
      $consulta = $DB_con->query("SELECT * FROM hipodromo  ORDER BY id_hipodromo");
      while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
      ?>
      <option value="<?php echo $linea['id_hipodromo'] ;?>"><?php echo $linea['hipodromo'] ;?></option>
      <?php
      }
      ?>
    </select>
  </div>

</div>
<div class="header-title-left col s12 m6">
    <h5>Ejemplares a Registrar</h5>
</div>

<br>
<br>
<br>

<div class="row">
  <div class="inputs">
    <div id="ejemplar1">
      <div class="input-field col s12 m3">
        <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
        <label for="ejemplar">Ejemplar:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}' required/>
        <label for="peso">Peso:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar1')" required/>
        <label for="dividendo">Dividendo:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="icon_prefix" type="text" class="black-text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar1')"  required/>
        <label for="porcentaje">porcentaje:</label>
      </div>
      <div class="input-field col s12 m3">
        <input id="total" type="text" name="total[]" readonly/>
        <label for="total">Total:</label>
      </div>
    </div>
    <div id="ejemplar2">
      <div class="input-field col s12 m3">
        <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
        <label for="ejemplar">Ejemplar:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}' required/>
        <label for="peso">Peso:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' onChange="total('ejemplar2')" required/>
        <label for="dividendo">Dividendo:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar2')" pattern='[0-9]{1,2}' required/>
        <label for="porcentaje">porcentaje:</label>
      </div>
      <div class="input-field col s12 m3">
        <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
        <label for="total">Total:</label>
      </div>
    </div>
    <div id="ejemplar3">
      <div class="input-field col s12 m3">
        <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
        <label for="ejemplar">Ejemplar:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}'  required/>
        <label for="peso">Peso:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' onChange="total('ejemplar3')" required/>
        <label for="dividendo">Dividendo:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar3')" pattern='[0-9]{1,2}' required/>
        <label for="porcentaje">porcentaje:</label>
      </div>
      <div class="input-field col s12 m3">
        <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
        <label for="total">Total:</label>
      </div>
    </div>
    <div id="ejemplar4">

      <div class="input-field col s12 m3">
        <input id="ejemplar" type="text" name="ejemplar[]" autocomplete='off' title='no pueden haber campos vacios, solo se permiten letras.' pattern='[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+' required/>
        <label for="ejemplar">Ejemplar:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="peso" type="text" name="peso[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{2,2}' required/>
        <label for="peso">Peso:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' pattern='[0-9]{1,2}' onChange="total('ejemplar4')" required/>
        <label for="dividendo">Dividendo:</label>
      </div>
      <div class="input-field col s12 m2">
        <input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title='no pueden haber campos vacios, solo se permiten numeros.' onChange="total('ejemplar4')" pattern='[0-9]{1,2}' required/>
        <label for="porcentaje">porcentaje:</label>
      </div>
      <div class="input-field col s12 m3">
        <input id="total" type="text" name="total[]" autocomplete="off" readonly/>
        <label for="total">Total:</label>
      </div>
    </div>
  </div>
</div>
<div class="center-align">
  <button id="agregar" type="button" class="btn waves-effect light-blue accent-4 btn-medium">+</button>
  <button id="quitar" type="button" style="display:none;" class="btn waves-effect light-blue accent-4 btn-medium">-</button>
  <button type="submit" name="guardar" class="btn waves-effect light-blue accent-4 btn-medium">Registrar</button>
  <button type="reset" class="btn waves-effect light-blue accent-4 btn-medium">Cancelar</button>
  <a href='carrera_caballos.php' button class='btn waves-effect light-blue accent-4 btn-medium' type='submit'>Volver</a>
</div>
<br>
<br>
</form>

funcion total

<script language="javascript">
function total(iddiv){
  var resultado;
  var x=0;
  var y=0;
  //obtengo el elemento input
  var divv = document.getElementById(iddiv);

  var inputv = divv.getElementsByTagName("input");  

  x = parseInt (inputv[2].value); // campo dividendo
  y = parseInt (inputv[3].value); //campo porcentaje

  resultado = x * y;

  inputv[4].value=resultado;  //se muestra valor en total
}
</script>

funcion_agregar_campos.js

var inputs = 4;
$(document).ready(function(e) {
  $('#agregar').on('click', function() {
    if (inputs == 14) {
      return false;
    }

    inputs = inputs + 1;

    if ($('#ejemplar' + inputs + '').length > 0) {
      $('#ejemplar' + inputs + '').show();

    } 


          else 

    {




$('.inputs').append('<div id="ejemplarr'+inputs+'"><div class="input-field col s12 m3"><input id="ejemplar" type="text" name="ejemplar[]" autocomplete="off"  title="no pueden haber campos vacios, solo se permiten letras." pattern="[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+" required/><label for="ejemplar">Ejemplar:</label></div><div class="input-field col s12 m2"><input id="peso" type="text" name="peso[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." pattern="[0-9]{2,2}" required/><label for="peso">Peso:</label></div><div class="input-field col s12 m2"><input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." onChange="total('ejemplarr')" pattern="[0-9]{2,2}" required/><label for="dividendo">Dividendo:</label></div><div class="input-field col s12 m2"><input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." onChange="total('ejemplarr')" pattern="[0-9]{2,2}" required/><label for="porcentaje">porcentaje:</label></div><div class="input-field col s12 m3"><input id="total" type="text" name="total[]" autocomplete="off" readonly/><label for="total">Total:</label></div></div>');



    }

    $('#quitar').fadeIn();
    if (inputs == 14) {
      $('#agregar').fadeOut();

    }
  });
  $('#quitar').on('click', function() {
    if (inputs == 4) {
      return false;
    }
    $('#ejemplar' + inputs + '').hide();
    inputs = inputs - 1;
    $('#agregar').fadeIn();
    if (inputs == 4) {
      $('#quitar').fadeOut();
    }
  });
});
2

1 respuesta 1

1

1. Al agregar form no calcula el total

Al agregar un elemento <form> efectivamente agregaste un posible EventTarget que escucha los eventos de los nodos hijos.

El problema es que al intentar ejecutar el metodo total() desde:

<input id="dividendo" type="text" name="dividendo[]" autocomplete="off"
                           title='no pueden haber campos vacios, solo se permiten numeros.'
                           onChange="total('ejemplar1')" required/>

Se encuentra con el identificador total definido en:

<input id="total" type="text" name="total[]" readonly/>

Al tener un id="total" se crea como propiedad en el HTMLFormElement de nombre "form". Lo intenta ejecutar y falla porque no es una funcion.

Debes evitar crear tantos ids porque comienzan a llenar el espacio de nombres, ademas deben ser unicos en todo el documento.

2. Al agregar elementos de forma dinamica no calcula el total

Al agregar elementos HTML como cadenas de texto en javascript, debes cuidar el uso de comillas simples y dobles, en la linea en que agregas los inputs las comillas no estan bien colocadas, se vuelve inmantenible el codigo cuando es mucho contenido:

$('.inputs').append('<div id="ejemplarr'+inputs+'"><div class="input-field col s12 m3"><input id="ejemplar" type="text" name="ejemplar[]" autocomplete="off"  title="no pueden haber campos vacios, solo se permiten letras." pattern="[a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+" required/><label for="ejemplar">Ejemplar:</label></div><div class="input-field col s12 m2"><input id="peso" type="text" name="peso[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." pattern="[0-9]{2,2}" required/><label for="peso">Peso:</label></div><div class="input-field col s12 m2"><input id="dividendo" type="text" name="dividendo[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." onChange="total('ejemplarr')" pattern="[0-9]{2,2}" required/><label for="dividendo">Dividendo:</label></div><div class="input-field col s12 m2"><input id="porcentaje" type="text" name="porcentaje[]" autocomplete="off" title="no pueden haber campos vacios, solo se permiten numeros." onChange="total('ejemplarr')" pattern="[0-9]{2,2}" required/><label for="porcentaje">porcentaje:</label></div><div class="input-field col s12 m3"><input id="total" type="text" name="total[]" autocomplete="off" readonly/><label for="total">Total:</label></div></div>');

El contenido que le pasas a append('') esta con comillas simples, pero dentro de esa enorme linea de texto tienes onChange="total('ejemplarr')" donde nuevamente usas comillas simples sin escapar con backslash \, ademas no estas usando la variable inputs que si usaste en el div.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.