Multiplication and sum of inputs in a site

Question

Multiplication and sum of inputs in a site

Asked 6 years, 2 months ago

Viewed 367 times

0

I am building a website and I need help: I have 3 fields on this site (input) and each represents a fixed value (1,500, 250 and 500), I would like to be able to insert in these fields the amount of times I want this value so that the sum is made and the result is displayed without the need to load the page:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Orçamento</title>
</head>
<body>
    <div>
        <h1 class="titulo">Orçamento</h1>
    </div>
    <div>
        Quantidade item 1 =
        <input type="number" name="campoUm" id=""> 
        x R$ <var id="valorUm">1500</var> = 
    </div>
    <div>
        Quantidade item 2 =
        <input type="number" name="campoDois" id="">
        x R$ <var id="valorDois">250</var> =
    </div>
    <div>
        Quantidade item 3 =
        <input type="number" name="campoTres" id=""> 
        x R$ <var id="valorTres">500</var> =
    </div>
    <div>
        Total =
    </div>
</body>
</html>

Can you help me?

You can put the HTML of these fields?

– Sam

2018/04/06 at 00:58
It’s not looking good, but you can see visually better what I’m trying to do.. But from there, I don’t know how to save variables to do the calculations. I would use the id/class/name value for this?

– eloypellegrino

2018/04/06 at 01:29

3 answers

1

Good night.

You can use jQuery to facilitate the handling of some HTML elements. With all due respect, I took the liberty of tweaking a few things in your code. Please see if the example below helps you in any way.

Explanation: For each field where the user type the value, I created two functions in jQuery, one for the keyUp event (After he finishes pressing some key) and another is the change function (if the user clicks the up or down arrow, which is inside the field).
The idea is that every time some value is typed in any of the three fields, the script is taking the value of all the fields and multiplying by the fixed value that is defined in the VAR tags. Finally, you are summing all the results of the multiplications and displaying the total value in the tag valorTotal
To help you, if you need to take the full purchase amount, there is a field input type=Hidden with the ID and name value equals Pay, if you send this value to another page that will process the payment

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Orçamento</title>
</head>
<body>
<div>
    <h1 class="titulo">Orçamento</h1>
</div>
<div>
    Quantidade item 1 =
    <input type="number" name="campoUm" id="campoUm"> 
    x R$ <var id="valorUm">1500</var> = <var id="resultado1"></var>
</div>
<div>
    Quantidade item 2 =
    <input type="number" name="campoDois" id="campoDois">
    x R$ <var id="valorDois">250</var> = <var id="resultado2"></var>
</div>
<div>
    Quantidade item 3 =
    <input type="number" name="campoTres" id="campoTres"> 
    x R$ <var id="valorTres">500</var> = <var id="resultado3"></var>
</div>
<div>
    Total = <var id="valorTotal"></var>
    <input type="hidden" name="valorTotalCompra" id="valorTotalCompra" value="" />
</div>
<script type="text/javascript">
    $(document).ready(function(){

        //exemplo utilizando jQuery
        $(document).on('keyup','#campoUm',function(){
            let total1 = $('#'+this.id+'').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado1').empty();
            $('#resultado1').html('R$ '+total1);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoUm',function(){
            let total1 = $('#'+this.id+'').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado1').empty();
            $('#resultado1').html('R$ '+total1);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('keyup','#campoDois',function(){
            let total2 = $('#'+this.id+'').val() * $('#valorDois').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado2').empty();
            $('#resultado2').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoDois',function(){
            let total2 = $('#'+this.id+'').val() * $('#valorDois').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total3 = $('#campoTres').val() * $('#valorTres').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado2').empty();
            $('#resultado2').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('keyup','#campoTres',function(){
            let total3 = $('#'+this.id+'').val() * $('#valorTres').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado3').empty();
            $('#resultado3').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

        $(document).on('change','#campoTres',function(){
            let total3 = $('#'+this.id+'').val() * $('#valorTres').text();
            let total1 = $('#campoUm').val() * $('#valorUm').text();
            let total2 = $('#campoDois').val() * $('#valorDois').text();
            let valorTotal = total1 + total2 + total3;
            $('#resultado3').empty();
            $('#resultado3').html('R$ '+total2);
            $('#valorTotal').empty();
            $('#valorTotal').html('R$ '+valorTotal);
            $('#valorTotalCompra').val('');
            $('#valorTotalCompra').val(valorTotal);
        });

    });

</script>
</body>
</html>

Browser other questions tagged javascript html

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

by Barbetta • **5,587** points · Answer 1 · 2018-04-06T01:53:54+00:00

It is possible to take the value of the variables using javascript, either by id, name or class, the last two options can return 1 array since on the screen can have more than 1 item with the same name or class.

In the example I created I took the items by id, after that I made a check if they are numerical and, if not, assigns the value 0 to them. After that I did the calculation and finally assigns the calculation values on the screen through the html element <span>(for that I gave 1 id for each).

So that the calculation would be done each time the value of inputs were changed, I played the code in a function and call this function at the event onchange, that is, every time the value is changed:

    function somaTudo(){

        var valorUm = parseInt(document.getElementById("campoUm").value)
        var valorDois = parseInt(document.getElementById("campoDois").value)
        var valorTres = parseInt(document.getElementById("campoTres").value)
        
        if(isNaN(valorUm))
        valorUm = 0

        if(isNaN(valorDois))
        valorDois = 0

        if(isNaN(valorTres))
        valorTres = 0

        var TotalUm = (valorUm * 1500);
        var TotalDois = (valorDois * 250);
        var TotalTres = (valorTres * 500);

        document.getElementById("TotalCampoUm").innerHTML= TotalUm;
        document.getElementById("TotalCampoDois").innerHTML = TotalDois;
        document.getElementById("TotalCampoTres").innerHTML = TotalTres;
        document.getElementById("Total").innerHTML = (TotalUm + TotalDois + TotalTres);
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Orçamento</title>
</head>
<body>
    <div>
        <h1 class="titulo">Orçamento</h1>
    </div>
    <div>
        Quantidade item 1 =
        <input onchange="somaTudo()" type="number" min="0" name="campoUm" id="campoUm"> 
        x R$ <var id="valorUm">1500</var> = <span id="TotalCampoUm"></span>
    </div>
    <div>
        Quantidade item 2 =
        <input onchange="somaTudo()" type="number" min="0" name="campoDois" id="campoDois">
        x R$ <var id="valorDois">250</var> =<span id="TotalCampoDois"></span>
    </div>
    <div>
        Quantidade item 3 =
        <input onchange="somaTudo()" type="number" min="0" name="campoTres" id="campoTres"> 
        x R$ <var id="valorTres">500</var> =<span id="TotalCampoTres"></span>
    </div>
    <div>
        Total = <span id="Total"></span>
    </div>
</body>
</html>

by Sam • **79,597** points · Answer 2 · 2018-04-06T02:22:05+00:00

A practical and real-time way is to create events inputs that updates the value as the fields are changed. No need to ids.

That’s why I tagged <var id="total"></var> to receive the sum value:

var qtd = document.body.querySelectorAll("input[type='number']");
for(var x=0; x<qtd.length; x++){
   qtd[x].addEventListener("input", function(){
      var vals = document.body.querySelectorAll("var[id*='valor']");
      var soma = 0;
      
      for(var y=0; y<vals.length; y++){
         soma += parseFloat(vals[y].textContent)*vals[y].parentNode.querySelector("input").value;
      }

      if(!isNaN(soma)) document.body.querySelector("#total").textContent = soma;
   });
}

<div>
   <h1 class="titulo">Orçamento</h1>
</div>
<div>
   Quantidade item 1 =
   <input type="number" name="campoUm">
   x R$ <var id="valorUm">1500</var> = 
</div>
<div>
   Quantidade item 2 =
   <input type="number" name="campoDois">
   x R$ <var id="valorDois">250</var> =
</div>
<div>
   Quantidade item 3 =
   <input type="number" name="campoTres">
   x R$ <var id="valorTres">500</var> =
</div>
<div>
   Total = <var id="total"></var>
</div>