problemas con select

[aviweb2015]

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:

<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
date_default_timezone_set('America/Caracas');
$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:

<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>