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();
}
});
});