Good morning. I'm a beginner programmer, and I'm developing a web sales app, where my system generates inputs dynamically for each product, multiplying the price of the product by quantity. But now I need it to add those values to the final value of the sale.
Form Code:
<form name="cadastro_venda" id="cadastro_venda">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field_venda">
<tr class="row">
<td>
<div class="input-field col s6">
<input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate">
<label class="active" for="input_produto_venda[]">Produto</label>
</div>
<div class="input-field col s2">
<input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1">
<label class="active" for="input_quantidade_venda[]">Quantidade</label>
</div>
<div class="input-field col s2">
<div class="input_preco_venda"></div>
<label class="active" for="input_preco_venda[]">Preço</label>
</div>
<div class="input-field col s2">
<button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3" id="add" name="add" ><i class="material-icons">add</i></button>
</div>
</td>
</tr>
</table>
<div class="row">
<div class="input-field col s3">
<?php echo "O Total é: R$" ?><div class="soma_venda"></div>
</div>
<div class="input-field col s9">
<a type="button" name="submit" id="submit" class="waves-effect waves-light grey darken-3 btn fonte_button modal-trigger"><i class="material-icons left">attach_money</i>Registrar Venda</a>
</div>
</div>
</div>
</form>
Code that generates dynamic inputs:
<script>
$(document).ready(function () {
$(document).on("keyup", ".input_quantidade_venda", function(){
var indice = $(".input_quantidade_venda").index(this);
var n1 = parseInt(this.value, 10);
$('.input_preco_venda:eq('+indice+')').html(n1 * 10);
});
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field_venda').append('<tr class= "row" id="row' + i + '"><td><div class="input-field col s6"><input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate"><label class="active" for="input_produto_venda[]">Produto</label></div><div class="input-field col s2"><input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1"><label class="active" for="input_quantidade_venda[]">Quantidade</label></div><div class="input-field col s2"><div class="input_preco_venda"></div><label class="active" for="input_preco_venda[]">Preço</label></div><div class="input-field col s2"><button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3 btn btn-danger btn_remove" name="remove" id="' + i + '"><i class="material-icons">remove</i></button></div></td> </tr>');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$('#submit').click(function(){
$.ajax({
url:"components/cad_venda.php",
method:"POST",
data:$('#cadastro_venda').serialize(),
success:function(data) {
alert(data);
$('#cadastro_venda')[0].reset();
}
});
});
M.updateTextFields();
});
</script>
Code that multiplies the price of the product by quantity:
<script>
$(document).on("keyup", ".input_quantidade_venda", function(){
var indice = $(".input_quantidade_venda").index(this);
var n1 = parseInt(this.value, 10);
$('.input_preco_venda:eq('+indice+')').html(n1 * 10);
});
</script>