1

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 y dejo el select:

<select name="porcentaje" onblur="calcula_porcentaje(this.form)" required> 

no me funciona 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:

Select:

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

Función 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);  

}

2 respuestas 2

0

Materialize reemplaza en tiempo de ejecución todos los selects por cajas de texto con elementos HTML auxiliares a su alrededor. Para configurar los eventos de un select, usá jQuery:

$(function() {
    $("select[name=porcentaje]").change(function() {
        calcula_porcentaje($(this).form);
    });
});
1
  • me he fijado que ahora class="browser-default" ahora no me funciona en el navegador Google Chrome y antes me funcionaba bien, pero nunca me ha servido cuando le pongo sin class="browser-default"
    – yoclens
    Commented el 6 ago. 2017 a las 14:44
0

Esto es sí un conflicto con la biblioteca Materialize. Porque el Materialize copia el contenido de los selects (o convierte si prefieres esa palabra) y crea nuevos elementos para poder agregar sus estilos a su manera Materialize, y esconde los elementos originales. Pero cuando se utiliza la clase class="browser-default" usted está diciendo al Materialize para utilizar el select predeterminado del navegador. Entonces nada sucede, los elementos select y options no se cambian por <li>. materialize-forms#select

Aquí están mis dos centavos de contribución para mejorar este código y buenas prácticas.

Evite el uso de scripts en línea

Separe su JavaScript de su HTML. El uso de scripts en línea es una mala práctica. En general, es bueno tratar de mantener HTML y JS separados. HTML es para la vista, JS es para la lógica de la aplicación.

Usando estos separados, que es la mejor forma de hacerlo, puede beneficiar usted en algunas de las siguientes maneras:

  • Código no intrusivo
  • Sin mezcla de lenguajes de programación.
  • Puede agregar comportamiento a una gran cantidad de elementos HTML de una vez sola sin duplicación de código.
  • Y más...

Cómo proceder

Realice los siguientes cambios en su código. En la etiqueta select, envuelva el elemento con un nuevo elemento id="porcentaje-id" así:

<div class="input-field col s12 m3">
    <div id="porcentaje-id"> <!-- Nuevo elemento aquí -->
        <select name="porcentaje" required>
            ...
        </select>
    </div>
</div>

Y agregue este script después de su función Javascript

var s = document.querySelectorAll("#porcentaje-id li:not(.disabled)");

for (var i = 0; i < s.length; i++) {
    var selOpt = s[i];
    selOpt.addEventListener("click", function(el){
        calcula_porcentaje();
    });
}

Todo junto deberá quedar algo de este género abajo:

Vea este enlace para ver una de las maneras de cómo puede actualizar sus nuevos selectores de variables: https://jsfiddle.net/rpf83swp/

function calcula_porcentaje(form) {
    // hace algo aquí
    alert('clicked. Hace algo aquí');
}

$('select').material_select();
var s = document.querySelectorAll("#porcentaje-id li:not(.disabled)");

for (var i = 0; i < s.length; i++) {
    var selOpt = s[i];
    selOpt.addEventListener("click", function(el){
        calcula_porcentaje();
    });
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<div class="input-field col s12 m3">
    <div id="porcentaje-id">
    <select name="porcentaje" required>
        <option value="" disabled selected>Porcentaje:</option>
        <option value="otro">otro</option>
        <option value="aindaotro">ainda otro</option>
    </select>
    </div>
</div>

5
  • pero igual lo hice y no me funciona el ejemplo es el siguiente ingreso un monto luego ese monto le añado el porcentaje con el select y en otro input muestro la ganancia y en otro el total, pero no me hace el calculo, me he fijado que ahora class="browser-default" ahora no me funciona en el navegador Google Chrome y antes me funcionaba bien
    – yoclens
    Commented el 6 ago. 2017 a las 14:43
  • @yoclens , has probado esta nueva actualización con la versión clic? El primero no funcionaba correctamente, pero éste he probado personalmente con lo Materialize. Como en el ejemplo que está en mi respuesta
    – Chun
    Commented el 7 ago. 2017 a las 18:18
  • si y no me funciona el problema es el siguiente: tengo un input donde pongo el monto, luego tengo el select con los porcentajes, luego tengo un input que me muestra la ganancia y por ultimo otro input que me muestra el total cuando coloco el monto y selecciono el porcentaje que quiero aplicarle a ese monto debería ponerme la ganancia y el total pero no me hace nada no se el porque de ese error
    – yoclens
    Commented el 7 ago. 2017 a las 22:26
  • @yoclens Sí, porque como dice los elementos cambian cuando el documento es cargado. Por eso ahora también tienes que cambiar los selectores var monto = form.monto.value; etc, para los selectores deseados. Como expliqué en mi respuesta, si el select no tiene (class = "browser-default"), ese elemento será completamente modificado después de la carga de la página. Entoces, el selector form.monto.value etc dejará de tener efecto porque "ya no existe". El código así funciona, sólo tienes que hacer las debidas actualizaciones dentro de la función Javascript calcula_porcentaje().
    – Chun
    Commented el 8 ago. 2017 a las 0:08
  • Mira aquí este ejemplo en jsFiddle @yoclens - jsfiddle.net/rpf83swp
    – Chun
    Commented el 8 ago. 2017 a las 0:54

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.