Skip to main content
2 de 2
se añadieron 20 caracteres en el cuerpo
Xerif
  • 7.4k
  • 3
  • 19
  • 42

problemas con funcion .js en formulario

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();
    }
  });
});
yoclens
  • 555
  • 2
  • 7
  • 28