calculate input value with two others, depending on the two that are filled in first one of the input is calculated?

Question

calculate input value with two others, depending on the two that are filled in first one of the input is calculated?

Navigation

#1 by (0 votes)

0

I have three input (cost, utility, price) and I want to do the following: if you write in cost and in utility that the price is calculated, in case it is written in cost and in price that the utility is calculated. This is my javascript code:

calc.js file

$(document).ready(function() {
$("input").on("change", function() {
calcular();
});

function calcular(){
var costo= $("#costo").val();
var utilidad= $("#utilidad").val();
var precio = $("#precio").val();

    if(precio.length > 0 && costo.length > 0 && utilidad.length == 0){
        utilidad = (parseFloat(precio) - parseFloat(costo)) / parseFloat(costo)*100;
        $("#utilidad").val(utilidad);
    }
    if(costo.length > 0 && utilidad.length > 0 && precio.length == 0){
        precio = (parseFloat(costo) * (parseFloat(utilidad)/100) ) + parseFloat(costo);
        $("#precio").val(precio);
    }
} 
});

html code:

<form action="Productos" method="post" enctype="multipart/form-data">
<div class="top-row">
    <div class="field-wrap">
        <label class="active1">
            Cost product<span class="req">*</span>
        </label>
        <input type="number" step="0.1" id="costo" name="costo" required/>
    </div>
    <div class="field-wrap">
        <label class="active1">
            % Uti: yes=50, no=50% or 0.5
        </label>
        <input type="number" id="utilidad" required name="utilidad"/>
    </div>
</div>
<div class="top-row">
    <div class="field-wrap">
    <label class="active1">
        Price product
    </label>
    <input type="number" id="precio"  required name="precio" />
</div>
<div class="field-wrap">                        
    <label class="active1">
        Date price product
    </label>
    <input type="date" id="fecha" name="fecha" required/>
</div>
</div>
</form>
<script src="Estilo/Login/js/calc.js"></script>

javascript html input

asked by Leonard Jusa Ockonell 17.01.2018 в 22:37

source

1 answer

refresh-on-save package does not work in firefox Attribute of an abstract class from another class within the same package

score 0 · Answer 1

This is what I could achieve with your new code:

$(document).ready(function() {
$("input").on("change", function() {
calcular();
});

function calcular(){
    var costo= $("#costo").val();
    var utilidad= $("#utilidad").val();
    var precio = $("#precio").val();

	    if (utilidad.length > 0 && precio.length > 0 && costo.length == 0){
	        costo = parseFloat(utilidad) - parseFloat(precio);
	        $("#costo").val(costo);
	    }
	    if(precio.length > 0 && costo.length > 0 && utilidad.length == 0){
	        utilidad = parseFloat(precio) - parseFloat(costo);
	        $("#utilidad").val(utilidad);
	    }
	    if(costo.length > 0 && utilidad.length > 0 && precio.length == 0){
	        precio = parseFloat(costo) + parseFloat(utilidad);
	        $("#precio").val(precio);
	    }
	} 
});

<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<div class="top-row">
    <div class="field-wrap">
        <label class="active1">
            Cost product<span class="req">*</span>
        </label>
        <input type="number" step="0.1" id="costo" name="costo" required/>
    </div>
    <div class="field-wrap">
        <label class="active1">
            % Uti: yes=50, no=50% or 0.5
        </label>
        <input type="number" id="utilidad" required name="utilidad"/>
    </div>
</div>
<div class="top-row">
    <div class="field-wrap">
    <label class="active1">
        Price product
    </label>
    <input type="number" id="precio" required name="precio" />
</div>
<div class="field-wrap">                        
    <label class="active1">
        Date price product
    </label>
    <input type="date" id="fecha" name="fecha" required/>
</div>
</div>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

You can change "change" by "blur" .