2

Estoy creando una aplicación que permita sacar reporte de planillas de pago de un trabajador, pero al momento de hacer clic, pareciera que llama a la función Calcular, pero no me muestra ningún resultado, solo se limpia todo el formulario por completo, he intentado de todo, pero sin solución, podrían ayudarme por favor.

Código HTML:

<div id="wrapper">
       

 <h2 id="titleRegistration">REPORTE DE PLANILLAS</h2>
        <form>
            

<fieldset id="planillas">
                <legend>Planillas</legend>

                <div class="divInformation">
                    <label class="label" for="nombre">Nombre:</label>
                    <input type="text" id="nombre" class="input" placeholder="Nombres y Apellidos" autocomplete="off" autofocus="autofocus"/>                                                
                </div>

                <div class="divInformation">
                    <label class="label" for="horastrabajadas">Número de horas trabajadas:</label>
                    <input type="text" id="horastrabajadas" class="input" placeholder="N° de horas trabajadas" autocomplete="off" />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="pagohora">Pago por hora trabajada:</label>
                    <input type="text" id="pagohora" class="input" placeholder="Ingrese pago por hora" autocomplete="off" />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="horasextras">Horas extras:</label>
                    <input type="text" id="horasextras" class="input" placeholder="Ingres horas extras" autocomplete="off" />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="numhijos">N° de hijos menores:</label>
                    <input type="text" id="numhijos" class="input" placeholder="Ingres numero de hijos" autocomplete="off" />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="bonificacion">Bonificación:</label>
                    <input type="text" id="bonificacion" class="input" placeholder="" readonly />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="sueldobruto">Ingreso Bruto:</label>
                    <input type="text" id="sueldobruto" class="input" placeholder="" readonly />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="afp">AFP:</label>
                    <input type="text" id="afp" class="input" placeholder="" readonly />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="essalud">EsSalud:</label>
                    <input type="text" id="essalud" class="input" placeholder="" readonly />                        
                </div>

                <div class="divInformation">
                    <label class="label" for="sueldoneto">Ingreso Líquido:</label>
                    <input type="text" id="sueldoneto" class="input" placeholder="" readonly />                        
                </div>

        


    </fieldset>

    <fieldset id="btnEnviar">
        <button id="btnCalcular" onclick="Calcular();">Calcular</button>
    </fieldset>
            
    </form>
</div>

Codigo JS:

function Calcular(){
    let horastrabajadas = parseInt(document.getElementById('horastrabajadas').value);
    let pagohora = parseInt(document.getElementById('pagohora').value);
    let horasextras = parseInt(document.getElementById('horasextras').value);
    let numhijos = parseInt(document.getElementById('numhijos').value);
   
    let bonificacion = numhijos * 10;
    let sueldobruto = (horastrabajadas * pagohora)+(horasextras * pagohora )+bonificacion;
    let afp = sueldobruto * 0.13;
    let essalud = sueldobruto * 0.08;
    let sueldoneto = sueldobruto - (afp + essalud)
    document.getElementById('bonificacion').value = bonificacion;
    document.getElementById('sueldobruto').value = sueldobruto;
    document.getElementById('afp').value = afp;
    document.getElementById('essalud').value = essalud;
    document.getElementById('sueldoneto').value = sueldoneto;
}
3
  • 2
    Métele un atributo type="button" al botón de calcular, pues al ser el único que hay y estar dentro de un <form> lo interpreta como un submit y lo ejecuta
    – masterguru
    Commented el 8 jun. a las 7:56
  • @masterguru muchas gracias, le acabo de asignar el type="button" y ya me mostró los resultados Commented el 9 jun. a las 1:51
  • 1
    Perfecto. Veo que no has marcado la excelente respuesta de @Yussef como "Aceptada" aunque le has dado las gracias. Repasa como funciona este sitio en el recorrido de bienvenida e intenta seguir su dinámica (aceptándola como válida) para que el resto de visitas a esta pregunta encuentren fácilmente la respuesta que mejor te ayudó, gracias! Sino va a parecer que esta pregunta no tiene ninguna respuesta válida y va a recibir visitas para intentar ayudar cuando ya no es necesario, haciéndoles perder el tiempo o la paciencia.
    – masterguru
    Commented el 9 jun. a las 6:26

1 respuesta 1

3

Cuando un button está dentro de un form y NO tiene definido su type, este botón será del tipo submit, tal como indica la documentación

submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a , or if the attribute is an empty or invalid value.

Entonces no es que tu formulario se limpie, lo que está pasando es que se envía al server y se devuelve sin valores.

La solución, es tal como indica @masterguru en su comentario, que es indicar el tipo correcto al botón type="button

<fieldset id="btnEnviar">
    <button type="button" id="btnCalcular" onclick="Calcular();">Calcular</button>
</fieldset>
1
  • muchas gracias, si acabo de asignar el type="button" y ya me salieron los resultados Commented el 9 jun. a las 1:53

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.