I have a simple code, with which I plan to perform an operation and when it works, place it in a larger code, I need to add the total of my multiplication and place it in an input in real time.
How it works, in the first field instead of placing any number I place Price: 7 , in the other field it is number type so I can control the number by which I want it to be multiplied and it shows it in the other field, when pressing Add Product creates another line with which I can continue multiplying as seen in the image
What I need is to add the total of those multiplications and show it in the field that says total. I used a for but it only shows me the total of any of the lines that I touch, how much should all the lines add up
Annex Code so that they can execute it and see how it works.
<!DOCTYPE html>
<html lang="es_ES">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = '<li id="idLi'+nextinput+'">' +
'<input type="text" size="15" id="txt' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\');" />' +
'<input type="number" size="15" id="nmb' + nextinput + '" step="any" oninput="multiplicar(\'txt' + nextinput + '\',\'nmb' + nextinput + '\',\'acumu' + nextinput + '\');" />' +
'<input type="text" size="15" id="acumu' + nextinput + '" step="any"/></li>';
$("#campos").append(campo);
}
function multiplicar(txt, nmb, acumu) {
var m1 = document.getElementById(txt).value;
var m2 = document.getElementById(nmb).value;
var P = /precio: (\d+)/i;
var match = m1.match(P);
var Price = parseInt(match[1]);
r = Price * m2;
document.getElementById(acumu).value = r;
let total = 0, numeros = acumu;
for(let i of numeros) total += i;
document.getElementById('T').value = r;
}
</script>
</head>
<body>
<form id="form" name="form" method="post">
<div align="left">
<a href="#" onclick="AgregarCampos();">Agregar Producto</a>
<ul id="campos"></ul>
<tr>
<td>
Total
</td>
<td>
<input type="text" id="T" value="0" disabled>
</td>
</tr>
</div>
</form>
</body>
</html>
Thank you for your help and suggestion that you can give me.
It is not necessary to assign dynamic IDs to the fields, it would be easier if you assigned them names and, if you expect to send it to be able to use them later, it is convenient to add square brackets
[]
so that they are treated as arrays when processing the form. Only the total field needs ID to be able to easily access and assign the value.In this way, you send the event to the function and, from there, you can get the 3 elements necessary to multiply and then add.
^
is to specify that the field name begins with the specified string./\D/g
, which is going to take all non-numeric characters and remove them with.replace()
.parseInt()
, it is added|| 0
to the end of the statement. For example, an empty field might returnNaN
acumu
to add them up and show the totalImportant: You already have the jQuery library loaded, it is best to use its methods to access elements and perform operations. It doesn't make sense to combine with pure Javascript.
replace this
For this
In this line add the class montage
and it works fine