Problema com seletores Jquery para campos criados dinamicamente...

alexroses · Agosto 27, 2019

Por favor, preciso de ajuda! Autocomplete funciona, meu problema é com os seletores jquery para campos dinâmicos...

Peço a ajuda de alguém para me ensinar a fazer seletor Jquery funcionar com campos dinâmicos... Eu crio linhas no formulário a partir de um evento que define a quantidade de linhas a nota terá... a partir dai ele cria as linhas e o primeiro campo tem um autocomplete, que funciona! Os demais campos utilizam a informação do auto complete para preencher o restante das informações... Eu crio um looping para criar as linhas e defino as requisições ajax no javascript ... O problema acontece quando seleciono o autocomplete nas linhas adicionais... Por causa do seletor dos campos terem o nome igual... Ou ele muda as informações em todas as demais linhas de uma vez, ou se eu usar eq(z) como seletor ele só altera as demais informações na ultima linha... Já tentei de tudo que se possa imaginar... Preciso de ajuda... O problema é como definir o seletor dos campos dinâmicos, pois tem a mesma class e name...

<div id="origem">

<div class="row">
<div class="col col-md-3">
<div class="input-group">

<input type="text" class="auto form-control" id="autoprod" name="prod[0]" placeholder="Produto...">

<input type="hidden" id="prodid" name="prodid[0]" value="0">

<script type="text/javascript">


$(document).ready(function(){

var i = 0;

$('#autoprod').eq(i).autocomplete({
source: function(request, response) {

$.ajax({
url:'<?php echo base_url().'Compras/prodList'; ?>',
type: 'post',
dataType: 'json',
data: {
search: request.term
},
success: function(data){
response(data);
}

});
},
select: function(event, ui){
$('#autoprod').eq(i).val(ui.item.label);
$('#prodid').val(ui.item.value);
$('#marca').val(ui.item.marc);
$('#unit').val(ui.item.uni);

return false;
}

});
});





</script>


</div>


</div>
<div class="col col-md-2">
<div class="input-group">

<input type="text" class="form-control" id="marca" name="marca[0]" placeholder="Marca..." readonly>

</div>
</div>


<div class="col">
<div class="input-group">



<input type="hidden" class="form-control" id="unit" name="unit[0]" placeholder="Unidade..." readonly>
<input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly>

<script type="text/javascript">

$(document).ready(function(){

$("#autoprod").on('blur', function() {
var txt = $('#unit').val();

var jtxt = {
'valor1': txt
};

$.ajax({
url: '<?php echo base_url()."Compras/ajax"; ?>',
type: 'post',
data: jtxt,
dataType:'json',
success:function(resultado) {

$("#lugar").val(resultado[0].nome_unit);


},
error:function(){
alert("Este produto não existe... Preencha corretamente o formulário!");

},



});

});
});




</script>




</div>
</div>



<div class="col">
<div class="input-group">

<input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required>

</div>


</div>
<div class="col">
<div class="input-group">

<input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required>

</div>


</div>
<div class="col">
<div class="input-group">

<input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly>

</div>

<script type="text/javascript">
function id(valor_campo) {
return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
var valor = document.getElementById(valor_campo).value.replace('.','');
valor = valor.replace(',','.');
return parseFloat(valor);
}

function mult() {
var total = getValor('valorunit') * getValor('quant');
id('totalp').value = total.toFixed(2);
}

</script>

</div>
</div>
</br>
</div>

<div id="destino">

</div>
Restante de formulário:

<script type="text/javascript">

$(document).ready(function(){

$("#qt").on('blur', function(e) {
e.preventDefault();
document.getElementById("qt").readOnly = true;
document.getElementById("destino").innerHTML="";

var qtr = $("#qt").val();

var i = 1;

while (i < qtr) {

var z = i - 1;


var t = '<div class="row">\<div class="col-3">\<div class="input-group">\<input type="text" class="autot form-control" name="prod[0]" placeholder="Produto...">\<input type="hidden" class="idr" name="prodid[0]" value="0">\</div></div>\<div class="col-2">\<div class="input-group">\<input type="text" class="nname form-control" name="marca[0]" placeholder="Marca..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="hidden" class="uunit form-control" name="unit[0]" placeholder="Unidade..." readonly>\<input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly>\</div></div></div></br>';

$("#destino").append(t);


$('.autot').autocomplete({
source: function(request, response) {

$.ajax({
url:'<?php echo base_url().'Compras/prodList'; ?>',
type: 'post',
dataType: 'json',
data: {
search: request.term
},
success: function(data){
response(data);
}

});
},
select: function(event, ui){


$(this).val(ui.item.label);

$('.idr').val(ui.item.value);

$('.nname').val(ui.item.marc);

$('.uunit').val(ui.item.uni);


return false;

}

});



i = i + 1;


}


});

});


</script>

</br></br>