Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcos Geam

Id input duplicado

Recommended Posts

Fala moçada, precisando de uma ajuda por aqui, vou tentar explicar o que tenho e o que não estou conseguindo vamos la:

eu tenho uma tabela onde o usuario vai informar o procedimento de uma lista autocomplete e automaticamente o jquery preenche o preço isso vindo do banco mysql/php está tudo funcionando normal com uma exceção o preço não está linkando ao procedimento quando duplicado o campo ele teima em apresentar o preço apenas no input master vou expor o codigo

 

HTML

<table>
<tbody id="duplica">
<tr>
<td><input type="text" name="procedimento[]" id="procedimento"/></td>
<td><input type="text" name="procedimento_preco[]" id="procedimento_preco"/></td>
</tr>
</tbody>
</table>

<button id="btnAdd" onclick="addRow('dataTable')" class="btn btn-success btn-sm btn-bordered" type="button"><i class="glyphicon glyphicon-plus-sign"></i> Add Item</button>//botao que aciona a clonagem da tr acima

 

<!--JS-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<script language="javascript">

 

var data = [
{value: "50", label: "Corte"},
{value: "75", label: "Tintura"},
{value: "25", label: "Hidratação"},
{value: "30", label: "Barba"}
]; //Estes dados sao apenas para teste, posteriormente irei puxar do banco

$(document).ready(function () {

//Adiciona <TR>
$("#btnAdd").click(function () {
var newRow = $(
"<tr>\n\
<td><input type='text' name='procedimento[]' id='procedimento'/></td>\n\
<td><input type='text' name='procedimento_preco[]' id='procedimento_preco'/></td>\n\
</tr>");

//Autocomplete da <TR> (duplicada)

//aqui ele lista os dados acima em cada input isto está ok inclusive ele lista para inputs duplicados
$("#duplica").append(newRow);
newRow.find('#procedimento').autocomplete({
source: data,
focus: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox
$(this).val(ui.item.label);
},

 

/* Aqui é onde está o problema, pela logica ele irá pegar o valor e exibir no input valor ele até está fazendo isso porém no campo duplicado ele reescreve o valor no primeiro campo sempre*/

select: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
$("#procedimento_preco").val(ui.item.value);
}
});

});
});
</script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.