`
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