I have the following PHP / HTML page:
<?php
include_once("conexao.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
body{
background-color: #34495e;
}
p {
color: white;
}
h3 {
color: white;
}
</style>
<script type="text/javascript">
var x = 0; //initlal text box count
function alerta(produto){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtProduto"+x).innerHTML = "<input type='number' id='preco"+x+"' value='"+this.responseText+"'>";
//document.getElementById("tipo").focus();
}
}
xmlhttp.open("GET", "pesquisa_preco.php?produto="+produto, true);
xmlhttp.send();
}
$(document).ready(function() {
var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<p>Produto '+x+'<select class="form-control" id="produto'+x+'" name="produto'+x+'" onchange="alerta(this.value)"></select><span id="txtProduto'+x+'"></span></p>');
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("produto"+x).innerHTML = this.responseText;
//document.getElementById("tipo").focus();
}
}
xmlhttp.open("GET", "pesquisa_produto.php?ativo=1", true);
xmlhttp.send();
window.scrollBy(0, 300);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
function somaTotais(){
for (var i = 1; i < x+1; i++) {
var valor = parseFloat(document.getElementById("preco"+i+"").value, 10);
window.alert(valor);
}
}
</script>
<title>Realizar Venda</title>
</head>
<body>
<br><br><br><br>
<div class="container">
<button onclick="somaTotais(this)">Somar Totais</button>
<form method="post" action="cadastra_venda.php" class="form-outline">
<div class="row">
<div class="col-md-2">
<p>Telefone: <input type="text" name="telefone" class="form-control"></p>
</div>
<div class="col-md-3">
<p>Cliente: <input type="text" name="cliente" class="form-control"></p>
</div>
<div class="col-md-3">
<p>Endereço: <input type="text" name="endereco" class="form-control"></p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="input_fields_wrap"></div><span id="txtProduto"></span>
</div>
</div>
<p><button class="add_field_button btn btn-info">Adicionar novo produto</button></p>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
<p>Valor Total: <input type="number" name="valor" class="form-control"></p>
</div>
</div>
<p><input type="submit" name="submit" value="Realizar Venda" class="btn btn-success"></p>
</form>
</div>
</body>
</html>
<?php
include_once("menu.php");
?>
I wanted help in this part here:
function somaTotais(){
for (var i = 1; i < x+1; i++) {
var valor = parseFloat(document.getElementById("preco"+i+"").value, 10);
window.alert(valor);
}
}
Where it takes the inputs of values that are in the form, which are added dynamically, as in the print below:
I wanted him to add the values into a single variable, and throw me that variable later.
The way it is now, it gives me a window.alert for every price, I wanted a window.alert just with the sum of the prices, but it looks like I'm traveling and I can not do that kkk