Ir para conteúdo

Arquivado

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

JoaoRobertoo

Array em JQuery

Recommended Posts

Bom dia, Pessoal

Estou com um problema que já fiquei por horas pesquisando sobre o assunto e não consegui de forma alguma implementar, meu ultimo caso era ter que abrir um tópico..

Vamos lá, estou com problema em um input que é inserido dinamicamente dentro do meu form via JQuery, ele vem como (name="nome[]"), e a pessoa vai inserindo isso dinamicamente conforme a necessidade, até ai tudo bem, isso funciona... agora eu estou tentando fazer com que conforme a pessoa coloque o nome, seja preenchido automaticamente o telefone e email... ai que está o problema, do jeito que eu fiz ele não funciona com esse campo dinâmico, somente se o campo não for um array.

 

Esse abaixo é o JQuery para colocar dinamicamente o campo, MIL perdoes por estar assim, tudo bagunçado, mais praticamente ele coloca 2 select, e 3 inputs (nome, telefone, email), como array (nome[], telefone[], email[])

$(document).ready(function(){  
    $("#botao-mais-convidados").click(function( e ){ 
        var contador = $("input[name='confirma']");
        $('#inputs_adicionais').append( '<label><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></label>' ); 
    }); 

Agora o JQuery com o AJAX que não consigo fazer funcionar.

$(document).ready(function(){
            $("input[name='nome']").blur(function(){
                var email = $("input[name='email']");
                var telefone = $("input[name='telefone']");
                var departamento = $("select[name='departamento']");

                $( email ).val('Carregando...');
                $( telefone ).val('Carregando...');
                $( departamento ).val('Carregando...');

                    $.getJSON(
                        'busca_cliente.php',
                        { nome: $( this ).val() },
                        function( json )
                        {
                            $( email ).val( json.email );
                            $( telefone ).val( json.telefone );
                            $( departamento ).val( json.departamento );
                        }
                    );
		});
	});

E o busca_cliente.php

<?php
	/**
	 * função que devolve em formato JSON os dados do cliente
	 */
	function retorna( $nome, $db )
	{
		$sql = "SELECT `id_usuario`, `nome`, `email` , `telefone` , `departamento`
			FROM `usuario` WHERE `nome` = '{$nome}' ";
 
		$query = $db->query( $sql );
 
		$arr = Array();
		if( $query->num_rows )
		{
			while( $dados = $query->fetch_object() )
			{
				$arr['email'] = utf8_encode($dados->email);
                $arr['telefone'] = utf8_encode($dados->telefone);
                $arr['departamento'] = utf8_encode($dados->departamento);
			}
		}
		else
			$arr['email'] = 'Não encontrado! Favor inserir';
 
		return json_encode( $arr );
	}
 
/* só se for enviado o parâmetro, que devolve os dados */
if( isset($_GET['nome']) )
{
	$db = new mysqli('127.0.0.1', 'root', 'DYNAMIC11', 'sistemaata');
	echo retorna( filter ( $_GET['nome'] ), $db );
}
 
function filter( $var ){
	return $var;//a implementação desta, fica a cargo do leitor
}

Gente, sério, já pesquisei bastante, não é por preguiça... estou vindo aqui no fórum não para vocês me darem as coisas de mão beijadas, só preciso de uma luz de como eu posso resolver isso, já vi que tem que usar o method each()... porém não consegui...

 

Usei o seguinte link para implementar: http://wbruno.com.br/ajax/input-preenche-formulario-ajax/

Então créditos para ele.

 

Espero que alguém me ajude,

 

Obrigado desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

troca aqui:

 

$(document).ready(function(){
            $("input[name='nome']").blur(function(){
                var email = $("input[name='email']");
                var telefone = $("input[name='telefone']");
                var departamento = $("select[name='departamento']");
por

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('label');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");
Mas 'label', deveria ser um por campo, troca por tr ou por fieldset.

Ai vai ficar melhor teu html.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok, troquei por fieldset, deslize meu, porém não funcionou o ajax.

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('fieldset');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

Alguma luz ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

trocou ali tb?

 

$('#inputs_adicionais').append( '<fieldset><td><select required name="status-convidados[]" id="input-status-convidados">
? o que aparece agora no console de erros ?

Ctrl + Shift + J ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Coloquei um alert, só pra ver se esta entrando dentro da função, após o 'blur', e nada também, fiz o seguinte...

$(document).ready(function(){
            $("input[name='nome[]']").on('blur', function(){
                var $parent = $(this).parents('fieldset');
                
                alert("Teste!");

                ...

Ele nem joga esse alert na tela...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faz assim:

 

$("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){
tinha esquecido de fazer o delegate.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa Bruno, obrigado desde já da força que tu ta me dando.

 

Deu certo, só que não, rsrs

 

Agora quando eu insiro o campo do nome, ele completa TODOS os outros inputs que foram inseridos dinamicamente, fica meio difícil de explicar, rsrs

 

Fiz essa GIF exemplificando o que acontece. (Não sei se é permitido gyazo aqui, se não for, me alertar)

http://gyazo.com/1e2b07bc91f0598141779181f8335f19

 

Se você souber o que é, será de grande ajuda, eu já estou tentando modificar aqui pra ver se resulta em algo.

 

Att,

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim sim.. por isso q tem o .parent() e .find() lá em cima:

 

$(document).ready(function(){
            $("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){
                var $parent = $(this).parents('fieldset');

                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");
Sem eles vai acontecer isso mesmo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O meu está assim mesmo, do jeito que você colocou, segue

$(document).ready(function(){
            $("#inputs_adicionais").on('blur', "input[name='nome[]']", function(){
                var $parent = $(this).parents('fieldset');
                
                var email = $parent.find("input[name='email[]']");
                var telefone = $parent.find("input[name='telefone[]']");
                var departamento = $parent.find("select[name='departamento[]']");

                $( email ).val('Carregando...');
                $( telefone ).val('Carregando...');
                $( departamento ).val('Carregando...');

                    $.getJSON(
                        'busca_cliente.php',
                        { nome: $( this ).val() },
                        function( json )
                        {
                            $( email ).val( json.email );
                            $( telefone ).val( json.telefone );
                            $( departamento ).val( json.departamento );
                        }
                    );
		});
	});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá.. então o problema é o html.

Como está ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vou postar somente a parte dos convidados/participantes, senão iria ficar muito poluido.

<tr>			
                    <td><select required name="status-responsavel" id="input-status-convidados" >
                        <option value="">Status</option>
                        <option value="Presente">Presente</option>
                        <option value="Ausente">Ausente</option>
                        <option value="Substituído">Substituído</option>
                    </select></td>
                    
                    <td><input type="text" name="nome-responsavel" id="input-nome-convidados" value="<?php echo $row_DadosUsr['nome']; ?>" required/></td>
                    
                    <td><select required name="departamento-responsavel" id="input-departamento-convidados">
                        <option><?php echo $row_DadosUsr['departamento']; ?></option>
                        <option value="Compras">Compras</option>
                        <option value="CRC">CRC</option>
                        <option value="PCP">PCP</option>
                        <option value="TI">TI</option>
                        <option value="Logistica">Logistica</option>
                        <option value="Comercial">Comercial</option>
                        <option value="Diretoria">Diretoria</option>
                        <option value="Financeiro">Financeiro</option>
                        <option value="DHO">DHO</option>
                        <option value="Marketing">Marketing</option>
                    </select></td>
                    
                    <td><input type="text" name="telefone-responsavel" placeholder=" Telefone" id="input-telefone-convidados" value="<?php echo $row_DadosUsr['telefone']; ?>"required/></td>
                    
                <td>
                    <input type="email" name="email-responsavel" id="input-email-convidados" value="<?php echo $row_DadosUsr['email']; ?>" required/></td>
					
					<fieldset>  <input type="button" name="add" id="botao-mais-convidados"  onClick="addValue()" value="+" /></fieldset>  
		</tr>
					<fieldset id="inputs_adicionais" ></fieldset>
		</div>

Primeiramente eu tenho um campo fixo, que é o responsável, por isso ele não é colocado dinamicamente, ele está funcionando o ajax lindamente, agora depois dele vem o <fieldset id="inputs_adicionais" ></fieldset>, que é aonde os inputs dinamicos são inseridos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como está o script de inserção dos inputs dinâmicos ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue,

$(document).ready(function(){  
    $("#botao-mais-convidados").click(function( e ){ 
        $('#inputs_adicionais').append( '<fieldset><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" class="nome" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></fieldset>' ); 
    });  
  
	$('#inputs_adicionais').delegate('a','click',function( e ){  
        e.preventDefault();  
        $( this ).parent('fieldset').remove(); 		
    });  
});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tá quebrado esse html. Faz assim:

 

$('#inputs_adicionais').append( '<tr><td><select required name="status-convidados[]" id="input-status-convidados"><option value="">Status</option><option value="Presente">Presente</option><option value="Ausente">Ausente</option><option value="Substituído">Substituído</option></select></td><td><input type="text" name="nome[]" placeholder=" Nome" id="input-nome-convidados" class="nome" required/></td><td><select required name="departamento[]" id="input-departamento-convidados"><option value="">Departamento</option><option value="Compras">Compras</option><option value="CRC">CRC</option><option value="PCP">PCP</option><option value="TI">TI</option><option value="Logistica">Logistica</option><option value="Comercial">Comercial</option><option value="Diretoria">Diretoria</option><option value="Financeiro">Financeiro</option><option value="DHO">DHO</option><option value="Marketing">Marketing</option></select></td><td><input type="text" name="telefone[]" placeholder=" Telefone" id="input-telefone-convidados" required/></td><td><input type="email" name="email[]" placeholder=" E-mail" id="input-email-convidados" required/></td><td><a><input type="button" class="remove" id="botao-menos-convidados"  onClick="delValue()" value="x" /></a></td></tr>' ); 
e ai:

 

var $parent = $(this).parents('tr');

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caraaa, eu não tenho nem como te agradecer, PERFEITO

 

Funcionou certinho... esse é meu primeiro código em PHP + MySQL + ...

 

Pretendo melhorar nesses quesitos...

 

Sério, não tenho nem como agradecer o quão paciente você foi comigo

 

Att,

João Roberto

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.