1

`

body{

  background:#ddd;
  font-family: monospace;

}

.contenedor_formulario{

width: 90%;
background:goldenrod;
margin: 10px 10px 10px 10px;
padding: 40px 40px 40px 40px;
display:grid;
grid-template-columns: repeat(8,1fr);
grid-auto-rows: auto;


}

.titulo{
grid-column-start: 1;
grid-column-end: 9;
color:black;
display: flex;
justify-content: center;
align-items: center;
background: goldenrod;
}

.label, .input{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.label{
    font-weight: bolt;
    font-size: 3ex;
    background: greenyellow;

}


.input{

    width: 150px;
}

.total{
    width: 150px;
    grid-column-end: 9; 
    
  }

.cantidad{

    width: 103px;
}

.label_total{
grid-column-end: 8; 
color:yellow;
background: black;
display: flex;
justify-content: center;
align-items: center;
font-weight: bolt;
font-size: 3ex;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carga de Gasto del Producto</title>


    <script>
function sumar() {
var n1 = parseInt(document.MyForm.numero1.value);
var n2 = parseInt(document.MyForm.numero2.value);
document.MyForm.resultado.value=n1+n2;
var we = n1+n2;
document.MyForm.resultado.value=(we.toLocaleString());



}
</script>


<script>
function MASK(form, n, mask, format) {
    if (format == "undefined") format = false;
    if (format || NUM(n)) {
      dec = 0, point = 0;
      x = mask.indexOf(".")+1;
      if (x) { dec = mask.length - x; }
  
      if (dec) {
        n = NUM(n, dec)+"";
        x = n.indexOf(".")+1;
        if (x) { point = n.length - x; } else { n += "."; }
      } else {
        n = NUM(n, 0)+"";
      } 
      for (var x = point; x < dec ; x++) {
        n += "0";
      }
      x = n.length, y = mask.length, XMASK = "";
      while ( x || y ) {
        if ( x ) {
          while ( y && "#0.".indexOf(mask.charAt(y-1)) == -1 ) {
            if ( n.charAt(x-1) != "-")
              XMASK = mask.charAt(y-1) + XMASK;
            y--;
          }
          XMASK = n.charAt(x-1) + XMASK, x--;
        } else if ( y && "$0".indexOf(mask.charAt(y-1))+1 ) {
          XMASK = mask.charAt(y-1) + XMASK;
        }
        if ( y ) { y-- }
      }
    } else {
       XMASK="";
    }
    if (form) { 
      form.value = XMASK;
      if (NUM(n)<0) {
        form.style.color="#FF0000";
      } else {
        form.style.color="#000000";
      }
    }
    return XMASK;
  }
  

  function NUM(s, dec) {
    for (var s = s+"", num = "", x = 0 ; x < s.length ; x++) {
      c = s.charAt(x);
      if (".-+/*".indexOf(c)+1 || c != " " && !isNaN(c)) { num+=c; }
    }
    if (isNaN(num)) { num = eval(num); }
    if (num == "")  { num=0; } else { num = parseFloat(num); }
    if (dec != undefined) {
      r=.5; if (num<0) r=-r;
      e=Math.pow(10, (dec>0) ? dec : 0 );
      return parseInt(num*e+r) / e;
    } else {
      return num;
    }
  }

</script>




</head>
<body>

    <link rel="stylesheet" href="u.css">
<h2> <a href="menu.html">Menu principal</a> </h2>
<h1>Formulario - Carga de Gasto del Producto</h1>

<div class="co">
<form action="" method="post" >
        <h2>Producto vendido a</h2>
        <label for="">Nombre del Cliente</label>
            <input type="text"  placeholder="Nombre" class="input-48" require>
            <h2 class="form_titulo"> Detalle del Gasto</h2>
            <input type="date" id="" name=""  class="input-48" require>
                <select name="usuarios" id="usuario">
                    <option value="Alicia Villalba">Alicia Villalba</option>
                    <option value="Marcelo Sosa">Marcelo Sosa</option>
                </select><br><br>
            <label for="">Nombre o Razon Social</label>
            <input type="text" id="" name="" placeholder="Nombre o Razon Social" class="input-48" require>
            <label for="">Costo Delivery</label>
            <input type="text" id="" name="" placeholder="Costo Delivery" class="input-48" require>
            <label for="">Costo Transporte</label>
            <input type="text" id="" name="" placeholder="Costo Transporte" class="input-48" require>
            <input type="submit" id="" value="Registrar" class="input-48" require>
</form>
</div>
        <div>
            <form class="contenedor_formulario"  name="MyForm">
                <h2 class="titulo">Detalle del Producto</h2>
                
                
                <label class="label">Marca</label> 
                <label class="label">Producto</label>
                <label class="label">Descripcion</label>   
                <label class="label">Modelo</label>  
                <label class="label">Categoria</label>
                <label class="label" >Cantidad</label>   
                <label class="label" >Costo</label>   
                <label class="label" >Total</label>  
                
                <input class="input" type="text"  placeholder="Marca">
                <input class="input" type="text"  placeholder="Producto">
                <input class="input" type="text"  placeholder="Descripcion">
                <input class="input" type="text"  placeholder="Modelo"> 
                <input class="input" type="text"  placeholder="Categoria">  
                <input class="cantidad" type="text"> 
                <input class="input" type="text"  placeholder="Costo">
                <input class="input" type="text"  placeholder="Total" name="numero1" size="20"  onchange="sumar(), MASK(this,this.value,'-$##,###,##0')" >

                <input class="input" type="text"  placeholder="Marca">
                <input class="input" type="text"  placeholder="Producto">
                <input class="input" type="text"  placeholder="Descripcion">
                <input class="input" type="text"  placeholder="Modelo"> 
                <input class="input" type="text"  placeholder="Categoria">
                <input class="cantidad" type="text">   
                <input class="input" type="text"  placeholder="Costo">
                <input class="input" type="text" placeholder="Total" name="numero2" size="20" onchange="sumar(), MASK(this,this.value,'-$##,###,##0')" >
                <input class="total" type="text" name="resultado" size="20" placeholder="total" >
                

            </form>
        </div>
</div>

</body>


</html>

`Buenas tardes Gente estoy empezando a programar y necesito generar un codigo que al ingresar en la celda CANTIDAD algun valor numerico me multiplique por el COSTO automaticamente y el resultado se visualice en el input de total de sus fila, y luego de manera automatica sin ningun boton que me sume los totales al final Tambien al momento de tipear los datos numericos en los input correspondientes a COSTO y CANTIDAD me separe con puntos decimales ejemplo= 2.345.543 y cuando multiplique CANTIDAD por COSTO se visualice en el input TOTAL tambien con puntos decimales

  

2
  • Tengo un codigo voy a agregar ese dato Commented el 30 sept. 2022 a las 13:04
  • Buenas tardes mas arriba escribi el codigo javascript para que sume pero no suma correctamente y ademas me aparece el el simbolo de dolar al inicio por favor ayuda Commented el 30 sept. 2022 a las 13:18

1 respuesta 1

2

Te dejo una demo

Elementos importantes:

  • Todos los campos deben tener una id, yo supuse esta nomenclatura: valor1, valor2, valor2, etc
  • Es mejor ocupar el evento oninput que onchange
  • Agregue un atributo "data-total", para ir guardando el total (sin separador de miles) de cada fila
  • Puedes ocupar toLocaleString('es') para colocar los separadores de miles
  • La función changeValores cambia el total de una fila
  • La función actualizarTotales actualiza el Total general, a partir de la cantidad guardada en "data-total"

function changeValores(id){
  let CantElement = document.getElementById("cant" + id);
  let ValorElement = document.getElementById("valor" + id);
  let TotalElement = document.getElementById("total" + id);
  
  let totalParcial = Number(CantElement.value) * Number(ValorElement.value);
  
  TotalElement.setAttribute("data-total",totalParcial);
  TotalElement.value = totalParcial.toLocaleString('es');
  actualizarTotales();
}

function actualizarTotales(){
   let TotalElement = document.getElementById("total");
   let suma=0;
   document.querySelectorAll("input[data-total]").forEach( e => suma += Number(e.getAttribute("data-total")));
   TotalElement.value = suma.toLocaleString('es');
}
<form>
<table>
<thead>
<tr>
<td>Producto</td>
<td>Cantidad</td>
<td>Valor</td>
<td>Total</td>
<tr>
</thead>

<tbody>
<tr>
<td>Puertas</td>
<td><input type="number" id="cant1" oninput="changeValores(1)" ></td>
<td><input type="number" id="valor1" value="100"  oninput="changeValores(1)"></td>
<td><input type="text" id="total1"  data-total="" readonly></td>
<tr>

<tr>
<td>Puertas</td>
<td><input type="number" id="cant2" oninput="changeValores(2)" ></td>
<td><input type="number" id="valor2" value="10"  oninput="changeValores(2)"></td>
<td><input type="text" id="total2" data-total="" readonly></td>
<tr>

</tbody>

<tfoot>
<tr>
<td></td>
<td></td>
<td>Total</td>
<td><input type="text" id="total" readonly></td>
<tr>
</tfoot>
</table>


</form>

5
  • Muchisimas gracias yussef sos un genio total tanto busque la respuesta para esto,sabes lo que me gustaria es que en el input valor poder ingresar manualmente el datos eso seria posible Commented el 30 sept. 2022 a las 15:37
  • @MarceloJoseSosaSosa Actualicé la respuesta para que también funcionara con los valroes
    – Yussef
    Commented el 30 sept. 2022 a las 15:59
  • Muchas gracias Yussef solo faltaria una cosita para que sea como necesito en el input valor al ingresar el valor se podria mostrar tambien la separacion por decimales?? te queria preguntar tambien si das clases de programacion Commented el 30 sept. 2022 a las 16:47
  • @MarceloJoseSosaSosa Eso da para otra pregunta, no solo porque escapa del contexto original de tu pregunta, sino porque agrega la dificultad de que cuando ingresas un valor con separación de miles, este valor deja de ser número y pasa a convertirse en texto, el cual no es posible multiplicarlo por cantidad, por lo que hay que reconvertirlo a número
    – Yussef
    Commented el 30 sept. 2022 a las 16:58
  • Entiendo entonces voy a generar otra pregunta en cuanto a eso ... mil gracias por la ayuda Yussef Commented el 30 sept. 2022 a las 17:16

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.