Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Senhores, um dúvida e acho que vocês podem me ajudar a exclarecer ou mudar o codigo.
Tenho um formulario onde pode acrescentar varias linhas com javascript e com um botão para chamar a função e que funciona bacana, codigo abaixo;
<script type="text/javascript">
$(function () {
$(".adicionarCampo").click(function () {
novoCampo = $("tr.linhas:first").clone();
novoCampo.find("input").val("");
novoCampo.insertAfter("tr.linhas:last");
removeCampo();
});
});
</script>
Tenho uma função em javascript também que faz preencher alguns campos automaticamente com base em um select.
<script type="text/javascript">
function update(cod_atividade){
$.post("scripts/codigos_atividades.php", {cod_atividade:cod_atividade}, function(retorno){
dados = retorno.split("/");
$('#descricao').val(dados[0]);
//alert(dados[0]);
});
}
</script>
O problema é que nos input, nos nomes eu coloquei colchetes no final, uma vez que eu tenho um array para gravar tudo de uma vez no banco.
<input name="descricao[]" type="text" required="required" id="descricao" size="45" maxlength="255" readonly="readonly" />
So que no script acima, ele direciona os inputs pelo ID, como o ID é unico, como que eu faço para ele reconher cada linha acrecentada conforme o 1º JS?
Ex:
Cliquei na primeira linha, selecionei uma opção no select e preencheu o campo descrição
Ao adicionar uma segunda linha, como o id é unico, ele não preenche, acaba alterando a primeira linha novamente.
Alguém sugere algo que eu consiga ele identificar cada linha acrescentada e preenche o campo daquela respectiva linha?
Obrigado desde já.Olá Omar, obrigado por ajudar.
O script de adicionar e remover campo, este funciona perfeitamente.
O script abaixo também funciona, só não funciona quando eu acrescento mais linha, ele continua sempre na primeira linha.
<script type="text/javascript">
function update(cod_atividade){
$.post("scripts/codigos_atividades.php", {cod_atividade:cod_atividade}, function(retorno){
dados = retorno.split("/");
$('#descricao').val(dados[0]);
//alert(dados[0]);
});
}
</script>
E é nesta parte que eu me perco. Ao clica no botão para adicionar linha, a linha é adicionada, mais o script acima so identifica o ID da primeira linha e as demais não funciona.Lógico , que só o primeiro é alvo, justo porque um identificador é único não pode se repetir.
Por isso lhe mostrei uma função que irá criar um elemento em loop cada um com um id único.
Da mesma forma que mostrei como encontrar esse elemento no DOM.
Mas não só pelo #ID que podemos encontrar um elemento no documento, existem várias outras formas, e uma infinidade de abordagens diferentes, não importa se está no DOM pode ser encontrado.
Um método seria ao criar o elemento adicionar ao mesmo um classificador que poderá ser usado para localizar ele com mais facilidade.
Então um função poderá manipular esse(s) elemento(s). Vejamos isso na prática:
Spoiler
<div class="elemento_alvo">Alvo da função 1</div>
<div class="elemento_alvo">Alvo da função 2</div>
<div class="elemento_alvo">Alvo da função 3</div>
<div class="elemento_alvo">Alvo da função 4</div>
<div class="elemento_alvo">Alvo da função 5</div>
<div class="elemento_alvo">Alvo da função 6</div>
<button onclick="update();">Ativar Update</button>
<script>
function update() {
var retorno = 'Item 1/Item 2/Item 3/Item 4/Item 5',
dados = retorno.split('/'),
alvos = document.getElementsByClassName('elemento_alvo');
for (var i = 0; i < alvos.length; i++) {
alvos[i].innerText = dados[i];
}
}
</script>
Como o que vamos adicionar a cada elemento vem de um array dados, podemos saber seus índices com
dados[0], dados[1] etc..
Usando o método para localizar o classificador "elemento_avo" teremos um array da NodeList de todos
alvos[0], alvos[1] etc..
Bastando então executar um loop no array dos elementos podemos obter o índice da volta atual do loop através de uma variável que se alto incrementa a cada volta.
Mas como nem tudo que reluz é ouro, problemas podem ocorrer se se a quantidade de itens no array dados for menor que o numero de elementos.
Para isso basta apenas conferir se exite algo para se manipular antes:
/*
for (var i = 0; i < alvos.length; i++) {
alvos[i].innerText = dados[i];
}for (var i = 0; i < alvos.length; i++) {
if (typeof dados[i] !== 'undefined' && dados[i] !== null) { // Adicionando esse checagem
alvos[i].innerText = dados[i];
}
}