0
I have the code below referring to the link Add or Remove Inputs with JS
function calcula(){
var total = 0;
$("span[id^=linha]:visible").each(function(){
var val_unit = parseFloat($(".class_unit input", this).val().replace(",", "."));
var qnt = $(".class_quant input", this).val();
var sub_total = val_unit * qnt;
if(!isNaN(sub_total)) $(".class_total input", this).val(sub_total.toFixed(2).replace(".", ","));
total += parseFloat($("input[id^=total]", this).val().replace(",", "."));
});
if(!isNaN(total)) $("#total input.value_total").val(total.toFixed(2).replace(".", ","));
}
//Total máximo de campos que você permitirá criar em seu site:
var totalCampos = 10;
//Não altere os valores abaixo, pois são variáveis controle;
var iLoop = 1;
var iCount = 0;
var linhaAtual;
function AddCampos() {
var hidden1 = document.getElementById("hidden1");
var hidden2 = document.getElementById("hidden2");
//Executar apenas se houver possibilidade de inserção de novos campos:
if (iCount < totalCampos) {
//Limpar hidden1, para atualizar a lista dos campos que ainda estão vazios:
hidden2.value = "";
//Atualizando a lista dos campos que estão ocultos.
//Essa lista ficará armazenada temporiariamente em hidden2;
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
if (document.getElementById("linha"+iLoop).style.display == "none") {
if (hidden2.value == "") {
hidden2.value = "linha"+iLoop;
}else{
hidden2.value += ",linha"+iLoop;
}
}
}
//Quebrando a lista que foi armazenada em hidden2 em array:
linhasOcultas = hidden2.value.split(",");
if (linhasOcultas.length > 0) {
//Tornar visível o primeiro elemento de linhasOcultas:
document.getElementById(linhasOcultas[0]).style.display = "block"; iCount++;
//Acrescentando o índice zero a hidden1:
if (hidden1.value == "") {
hidden1.value = linhasOcultas[0];
}else{
hidden1.value += ","+linhasOcultas[0];
}
/*Retirar a opção acima da lista de itens ocultos: <-------- OPCIONAL!!!
if (hidden2.value.indexOf(","+linhasOcultas[0]) != -1) {
hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
}else if (hidden2.indexOf(linhasOcultas[0]+",") == 0) {
hidden2.value = hidden2.value.replace(linhasOcultas[0]+",","");
}else{
hidden2.value = "";
}
*/
calcula();
}
}
}
function RemoverCampos(id) {
//Criando ponteiro para hidden1:
var hidden1 = document.getElementById("hidden1");
//Pegar o valor do campo que será excluído:
var campoValor = document.getElementById("valor_unitario"+id).value;
//Se o campo não tiver nenhum valor, atribuir a string: vazio:
if (campoValor == "") {
campoValor = "vazio";
}
if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído!\n\nDeseja prosseguir?")){
document.getElementById("linha"+id).style.display = "none"; iCount--;
//Removendo o valor de hidden1:
if (hidden1.value.indexOf(",linha"+id) != -1) {
hidden1.value = hidden1.value.replace(",linha"+id,"");
}else if (hidden1.value.indexOf("linha"+id+",") == 0) {
hidden1.value = hidden1.value.replace("linha"+id+",","");
}else{
hidden1.value = "";
}
calcula();
}
}
$(document).ready(function(){
$('span[id^=linha] input').on("input", calcula);
});
//Escrevendo o código-fonte HTML e ocultando os campos criados:
for (iLoop = 1; iLoop <= totalCampos; iLoop++) {
document.write("<span id='linha"+iLoop+"' style='display:none'><div class='class_unit'>Valor Unitário "+iLoop+":<input type='text' name='valor_unitario"+iLoop+"' id='valor_unitario"+iLoop+"' /></div><div class='class_quant'>Quantidade "+iLoop+": <input type='text' name='qnt"+iLoop+"' id='qnt"+iLoop+"' value='0' /></div><div class='class_total'>SubTotal "+iLoop+": <input type='text' name='total"+iLoop+"' id='total"+iLoop+"' readonly='readonly' /></div> <input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")'></span>");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form1" action="" method="post">
<div id="total">Total: <input class="value_total" readonly></input> </div>
<br><br><br>
<input type="button" value="Adicionar campos" onclick="AddCampos()">
<br><br><input type="text" name="hidden1" id="hidden1">
<input type="hidden" name="hidden2" id="hidden2">
</form>I managed to run perfectly, but I can’t pass the input values Unit Value N, Quantity N and Subtotal N to a query in BD through PHP/SQL. I tried it this way: Variable Declaration with PHP Constants ,but to no avail.
In case it would be more or less like this (I left very detailed and commented):
<?php
$sem_linha = str_replace('linha', '', $dados['hidden1']); //tiro a palavra "linha" do valor da input hidden', assim ao invés de linha1, linha2, linhaN... -> fica: 1, 2, N...
$explodido = explode(',', $sem_linha); //explodo o $sem_linha para criar array dos valores separados
$total_explodido = count($explodido); //conto quantos arrays foram gerados
$inc = 0; //contador
while($inc <= $total_explodido){ //laço para inserir todas as inputs
$input = $explodido[$inc]; //pego os arrays, importante notar que não necessariamente todas as inputs estarão preenchidas, por exemplo, posso ter as inputs 1,5,6,7 e 10 preenchidas
$id_prod = $dados['id_produto'][$input]; //<=isso está certo? aqui deveria buscar "id_produtoN"
$qnt_prod = $dados['qnt'][$input]; //<=isso está certo? aqui deveria buscar "qntN"
$query = "INSERT INTO produto (id_produto, quantidade produto, criado)
VALUES ($id_prod, $qnt_prod, NOW())"; //inserindo no BD
$result_query = mysqli_query($conn, $query);
}
?>However, it is giving error. In this part of PHP I have a huge doubt. It would have another way to pass the two input (id_product and qnt), which can vary from 1 to 10 (20 inputs)?
One of the mistakes is this: NOTICE Undefined offset: 1 on line number 15
Thanks...