Help with increasing fields with javascript

Asked

Viewed 67 times

0

I’m developing the following Javascript retirement calculator, I’m still learning the language.

http://www.utilizaweb.com.br/aposentadoria/

The calculator is already working normally the way it is there, but I would need to put more fields and do the calculation with them as well. If possible the user clicks on some + and automatically more fields appear. How could I do this?

Follows Code

<form class="form-calculadora" name="aposentadoria">

    <fieldset class="sexo">
        <legend>Sexo</legend>
        <select id="sexo" name="sexo" class="text-area">
            <option value="M"><i class="fa fa-male"></i>Masculino</option>
            <option value="F"><i class="fa fa-female"></i>Feminino</option>
        </select>
    </fieldset>

    <fieldset class="trabalho">
        <div class="row">
            <div class="empresa-area">
                <p class="title">Empresa</p>
                <input type="text" name="empresa" class="text-area" placeholder="Empresa: ">
            </div>

            <div class="regra-area">
                <p class="title">Regra</p>
                <select name="regra" class="text-area">
                    <option value="25">25 anos</option>
                    <option value="20">20 anos</option>
                    <option value="15">15 anos</option>
                </select>
            </div>

            <div class="admissao-area">
                <p class="title">Admissão</p>
                <input type="date" name="dataAdmissao" class="text-area" placeholder="Admissão: ">
            </div>

            <div class="demissao-area">
                <p class="title">Demissão</p>
                <input type="date" name="dataDemissao" class="text-area" placeholder="Demissão: ">
            </div>

            <div class="anos-area">
                <p id="anosTrabalhados">0 Anos</p>
            </div>
        </div>

    </fieldset>

    <input type="button" value="Calcular" onclick="calcula();" >

</form>

<p id="result"><img src="./img/aviso.png"></p>

JAVASCRIPT

function calcula(){
var sexo = document.aposentadoria.sexo.value;
var nRegra = document.aposentadoria.regra.value;
var empresa = document.aposentadoria.empresa.value;
var dataAdmissao = new Date(document.aposentadoria.dataAdmissao.value);
var dataDemissao = new Date(document.aposentadoria.dataDemissao.value);

if (dataDemissao > dataAdmissao) {;
    var anosTrab = dataDemissao.getFullYear() - dataAdmissao.getFullYear();
    var dateTrab = dataDemissao.getDate() - dataAdmissao.getDate();
    var mesTrab = dataDemissao.getMonth() - dataAdmissao.getMonth();
} else {
    alert("A data de admissão deve ser anterior à data de demissão.");
}

if ((sexo == "M") && (nRegra == "25")) {
    anosNovo = anosTrab * 1.40;
} else if ((sexo == "M") && (nRegra == "20")) {
    anosNovo = anosTrab * 1.75;
} else if ((sexo == "M") && (nRegra == "15")) {
    anosNovo = anosTrab * 2.33;
} else if ((sexo == "F") && (nRegra == "25")) {
    anosNovo = anosTrab * 1.20;
} else if ((sexo == "F") && (nRegra == "20")) {
    anosNovo = anosTrab * 1.50;
} else if ((sexo == "F") && (nRegra == "15")) {
    anosNovo = anosTrab * 2;
}


if (sexo == "M") {
    anosFalta = anosNovo - 35;
} else if (sexo == "F") {
    anosFalta = anosNovo - 30;
}

if (anosFalta < 0) {
    anosFim = anosFalta * -1;
}

var anosAjus = "Você trabalhou " +anosTrab+ " anos " +mesTrab+ " meses e " +dateTrab+ " dias";
var calculoNovaR = "Faltam " +anosFim+ " anos para se aposentar";

document.getElementById("anosTrabalhados").innerHTML = anosTrab+ " anos";
document.getElementById("result").innerHTML = "<img src='./img/aviso.png'>" +anosAjus+ "<br />" +calculoNovaR;}
javascript html calculus

  • Add HTML code and Javascript to your question, so it’s easier for others to help you

1 answer

0


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <style type="text/css">
        * { font-family:Arial; }
        h2 { padding:0 0 5px 5px; }
        h2 a { color: #224f99; }
        a { color:#999; text-decoration: none; }
        a:hover { color:#802727; }
        p { padding:0 0 5px 0; }

        input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border
    </style>
        <script type="text/javascript">

            $(function() {
                var scntDiv = $('#p_scents');
                var i = $('#p_scents p').size() + 1;

                $('#addScnt').live('click', function() {
                    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="" /></label> <a href="#" id="remScnt">X</a></p>').appendTo(scntDiv);
                    i++;
                    return false;
                });

                $('#remScnt').live('click', function() { 
                    if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                    }
                    return false;
                });
            });


        </script>
    </head>
    <body>
        <h2><a href="#" id="addScnt">Adicionar campo</a></h2>

        <div id="p_scents">
            <p>
                <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="" /></label>
            </p>
        </div>
    </body>
    </html>

Browser other questions tagged javascript html calculus

You are not signed in. Login or sign up in order to post.