0

tengo tres input (costo, utilidad, precio) y quiero hacer lo siguiente: si se escribe en costo y en utilidad que se calcule el precio, en caso de que se escriba en costo y en precio que se calcule la utilidad. Este es mi codigo javascript:

archivo calc.js

$(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);
    }
} 
});

codigo html:

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

1 respuesta 1

0

Esto es lo que pude lograr con tu nuevo código:

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

Puedes cambiar "change" por "blur".

5
  • cambie el codigo javascript, replantea la respuesta Commented el 17 ene. 2018 a las 22:26
  • La utilidad quieres que sea un porcentaje del costo o que sea cierto valor? Porque la formula que colocaste primero es para un porcentaje, y la que tienes ahora es diferente Commented el 17 ene. 2018 a las 23:32
  • Hola, he hecho el código lo más parecido a como tú lo tienes, pero igual tiene problemas de sintaxis y no has colocado más detalles para arreglarlo. Por ejemplo, en el código que te puse no se van a cambiar los valores cuando estén los 3 campos llenos y cambies uno, porque no sabría cual de los dos es el que debe cambiarse. Espero te resulte útil. Commented el 18 ene. 2018 a las 0:41
  • tranquilo, la formula no importa, lo que importa es que me funcione así como lo colocaste ahí y a mi no me funciona. si lo coloco en un archivo js y y hago referencia no me funciona y si lo coloco el código dentro del tag <script> tampoco. =( Commented el 18 ene. 2018 a las 15:47
  • ya lo arregle me hizo falta agregar al head el javascript que utilisaste en el head. Gracias por tu aiuda. Commented el 18 ene. 2018 a las 16:10

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.