Amigos tengo un problema con un select. Resulta que cuando le pongo la clase: class="browser-default" me funciona perfectamente para el cálculo del porcentaje, pero cuando le quito la clase al select y dejo el select en su estado normal:
Código:
<select name="porcentaje" onblur="calcula_porcentaje(this.form)" required>
no me funciona el calculo del porcentaje, no se si sera algún problema con el framework de Materialize o me faltaría agregar algo en mi función Javascript. Anexo el código abajo:
formulario
Código PHP:
Ver original<form class="col s12 m12 l12" action="anadiradelantos" name="form" method="POST">
<br>
<div class="row">
<div class="input-field col s12 m6">
<input id="icon_prefix" class="black-text" type="text" name="cod_ticket" placeholder="Cód Ticket" autocomplete="off" title="Disculpa, el n° de recibo debe contener nimino 4 digitos" pattern="[0-9]{4,10}" required/>
</div>
<div class="input-field col s12 m6">
<select name="id_puntos" required/>
<option value="" disabled selected>Punto:</option>
<?php
$consulta = $DB_con->query("SELECT * FROM puntos ORDER BY id_puntos");
while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
?>
<option value="<?php echo $linea['id_puntos'] ;?>"><?php echo $linea['puntos'] ;?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="row">
<div class="input-field col s12 m3">
<input id="icon_prefix" type="text" class="black-text" name="monto" placeholder="Monto" autocomplete="off" title="Disculpa, seleccione una fecha" pattern="[0-9]{4,8}" required/>
</div>
<div class="input-field col s12 m3">
<select name="porcentaje" onblur="calcula_porcentaje(this.form)" required/>
<option value="" disabled selected>Porcentaje:</option>
<?php
$consulta = $DB_con->query("SELECT * FROM porcentaje ORDER BY id_porcentaje");
while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
?>
<option value="<?php echo $linea['porcentaje'] ;?>"><?php echo $linea['porcentaje'] ;?>%</option>
<?php
}
?>
</select>
</div>
<div class="input-field col s12 m3">
<input id="icon_prefix" type="text" class="black-text" name="ganancia" placeholder="Ganancia" readonly/>
</div>
<div class="input-field col s12 m3">
<input id="icon_prefix" type="text" class="black-text" name="total" placeholder="Total" autocomplete="off" required/>
</div>
</div>
<div class="center-align">
<button class="btn waves-effect blue-grey darken-4 btn-medium" type="submit" name="guardar">Crear Registro</button>
<button class="btn waves-effect blue-grey darken-4 btn-medium" type="reset" name="guardar">Limpiar</button>
<a href='adelantos' button class='btn waves-effect blue-grey darken-4 btn-medium' type='submit'>Volver</a>
</div>
<br>
<?php
$hora = new Datetime($linea['hora']);
$linea['hora'] = $hora->format("h:i:sA");
?>
<input type='hidden' name='hora' value='<?php echo $linea['hora']; ?>' />
<input type="hidden" name="fecha" value="
<?php echo date("Y-m-d"); ?>" />
<?php
$consulta = $DB_con->query("SELECT * FROM usuarios WHERE id_nivel='Administrador'");
while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
?>
<input type="hidden" name="id_usuarios" value="<?php echo $linea['id_usuarios'] ;?>">
<?php
}
?>
</form>
mi función
Código Javascript
:
Ver original<script>
$(document).ready(function() {
$('select').material_select();
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("#element").hide();
});
});
</script>
<script language="javascript">
function calcula_porcentaje(form) {
var monto = form.monto.value;
var porcentaje = form.porcentaje.value;
var total = form.total.value;
if (porcentaje.length === 0) { return; }
if (monto.length === 0 && total.length === 0) { return; }
porcentaje = parseInt (porcentaje);
var resultado = 0;
if (total.length === 0) {
monto = parseInt(monto);
resultado = monto * porcentaje/100;
form.total.value = monto + resultado;
} else {
total = parseInt(total);
resultado = total * porcentaje/100;
form.monto.value = total - resultado;
}
form.ganancia.value = Math.round(resultado);
}
</script>