Estou montado um sistema de pedido que pega informações do banco de dados e preenche os campo com ela.
Segue o código da requisição que preenche os campo com as informações:
$(document).ready(function(){
$(".nome_prod").on("focusout", function(){
var $cod_prod = $(".cod_prod");
var $quantidade = $(".quantidade");
var $valor_uni = $(".valor_uni");
$.getJSON('function2.php',{
nome_prod: $( this ).val()
},function( json ){
$cod_prod.val( json.cod_prod );
$quantidade.val( json.quantidade );
$valor_uni.val( json.valor_uni );
});
});
});
O código que clona os campos:
function duplicarCampos(){
var clone = document.getElementById('origem').cloneNode(true);
var destino = document.getElementById('destino');
destino.appendChild (clone);
var camposClonados = clone.getElementsByTagName('input');
for(i=0; i<camposClonados.length;i++){
camposClonados[i].value = '';
}
}
function removerCampos(id){
var node1 = document.getElementById('destino');
node1.removeChild(node1.childNodes[0]);
}
e a function2.php
include_once("connections/conn2.php");
function retorna($nome_prod, $conn1){
$result_prod = "SELECT * FROM cad_produtos WHERE nome_prod = '$nome_prod' LIMIT 1";
$resultado_prod = mysqli_query($conn1, $result_prod);
if($resultado_prod->num_rows){
$row_prod = mysqli_fetch_assoc($resultado_prod);
$valores['nome_prod'] = $row_prod['nome_prod'];
$valores['quantidade'] = $row_prod['uni_med'];
$valores['valor_uni'] = $row_prod['valor_uni'];
$valores['cod_prod'] = $row_prod['codigo_prod'];
}
else{
}
return json_encode($valores);
}
if(isset($_GET['nome_prod'])){
echo retorna($_GET['nome_prod'], $conn1);
}
Quando eu duplico o campo ele não funciona, mas quando eu clico no primeiro campo preenche todos os demais com a mesma informação contida no primeiro campo.
Os campos que são clonados estão na div origem e são clonados para div destino porém eles apenas copiam as informações do primeiro campo
<div id="origem">
<div class="row">
<div class="col-md-2 col-xs-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-barcode"></i>
</div>
</div>
<input id="cod_prod" name="cod_prod[]" placeholder="Codigo do produto" type="text" class="form-control cod_prod">
</div>
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="form-group ">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-align-justify"></i>
</div>
</div>
<input id="descricao" name="nome_prod[]" placeholder="Descrição" type="text" class="form-control nome_prod">
</div>
</div>
</div>
<div class="col-md-2 col-xs-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
<input id="valor" name="valor_uni[]" placeholder="Valor" type="text" class="form-control valor_uni">
</div>
</div>
</div>
<div class="col-md-2 col-xs-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
<input id="valor" name="quantidade[]" placeholder="Quantidade" type="text" class="form-control quantidade">
</div>
</div>
</div>
</div>
</div>
<div id="destino">
</div>
#origem
, vc está duplicando tanto o id#origem
quanto os id's dos elementos dentro dessa div. Se está aprendendo HTML ainda, saiba que um id deve ser único na página, ou seja, não pode haver dois elementos com o mesmo id#origem
(nem os outros id's). Utilizeclass
em vez disso. – Sam 1/02/20 às 17:50