Enviado em 27/08/2019 - 12:03h
[youtube]Por favor... 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>
<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>
Atenção a quem posta conteúdo de dicas, scripts e tal (6)
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
O mínimo que você precisa saber sobre o terminal (parte 2)
O mínimo que você precisa saber sobre o terminal (parte 1)
Como iniciar uma máquina virtual do VirtualBox automaticamente no boot do LUbuntu 18 LTS
Flatpak: remover runtimes não usados e pacotes
Mudar o gerenciador de login (GDM para SDDM e vice-versa) - parte 2
Como deixar as abas do Firefox mais fininhas
Mudar o gerenciador de login (GDM para SDDM)
"Tentando" fazer com que programas rodem no Wayland e no X11
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta