Ir para conteúdo

POWERED BY:

Arquivado

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

winryzinha

[Resolvido] consulta paralela de um input com o banco de dados

Por , em Javascript

Recommended Posts

winryzinha    0

winryzinha
Postado

boa tarde pessoal,

 

tudo bem com vcs? (tomara que sim)

 

estou com a seguinte duvida:

 

como faço para que: ao digitar dados em um input text, ele faça uma consulta a meu banco de dados (MySQL) para verificar se aquele registro é existente:

 

caso não: apareça ao lado do input uma imagem de negação (esse registro não existe) e o input fica com a borda vermelha

 

caso sim: apareça uma imagem de confirmação e o input fica com a borda verde

 

porem gostaria de fazer isso sem refresh, tudo na mesma pagina do formulario.

 

se vcs puderem me ajudar eu agradeço mt.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exemplo com jQuery:

 

Verificar se usuário já existe no banco

http://www.wbruno.com.br/blog/?p=3

Compartilhar este post

Link para o post
Compartilhar em outros sites

winryzinha    0

winryzinha
Postado

Vlw! Brigada mesm, porem...

 

seria mais ou menos isso, como eu havia dito, gostaria de uma vrificação automatica,

sem a necessidade de usar um botão submit para verificar.

 

se houver um metodo de fazer eu agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

simples... em vez de disparar no click do botão, dispare no blur do campo.

 

Estude Javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

winryzinha    0

winryzinha
Postado

Boa noite pessoal! ^^

 

graças a ajuda do William

 

dei uma pesquisada na net e acabei achando mais ou menos o que eu queria,

 

consegui fazer a pesquisa paralela ao BD, porem ainda tenho uma duvida:

 

ao receber a resposta do banco de dados, gostaria de mudar a cor do input. Eis o código:

 

pagina index.html

<html>
<head>
<script type="text/javascript" src="funcs.js"></script>
</head>
<body>
<form name="cadastro" method="POST" action="">
  <table border="0">
    <tr>
      <td>codigo:</td>
      <td><input name="codigo" type="text" size="40" maxlength="40" id="codigo" onblur="validarDados('codigo', document.getElementById('codigo').value);" /></td>
      <td><div id="campo_codigo"></div></td>
    </tr>
    <tr>
      <td colspan="2">
          <input class="botao1" name="incluir" type="submit" value="cadastrar" />
      </td>
    </tr>
  </table>
</form>
</body>
</html>

pagina validacao.php

<?php
// Campo que fez requisição
$campo = $_GET['campo'];
// Valor do campo que fez requisição
$valor = $_GET['valor'];
// Conecta-se com o MySQL
$conexao = mysql_connect("localhost", "root", "");
// Seleciona banco de dados
mysql_select_db("banco");

$ok='<img src="ok.PNG">'; // imagem de confirmação
$erro='<img src="erro.PNG">'; // imagem de negação

// Verificando o campo codigo
if ($campo == "codigo") {

        $sql = "SELECT * FROM usuarios WHERE codigo=".$valor;

        $q = mysql_query( $sql );

        $n = mysql_num_rows( $q );

    if ($valor == "") {
    } elseif( $n > 0 ){//se retornar algum resultado
                echo $ok;
    }else{
                echo $erro;
        }

}
?>

arquivo funcs.js

// Variável que receberá o objeto XMLHttpRequest
var req;
 
function validarDados(campo, valor) {
 
// Verificar o Browser
// Firefox, Google Chrome, Safari e outros
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
// Internet Explorer
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Aqui vai o valor e o nome do campo que pediu a requisição.
var url = "ajax/validacao.php?campo="+campo+"&valor="+valor;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true);
 
// Quando o objeto recebe o retorno, é chamada a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Verificando" enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {
	// Resposta retornada pelo validacao.php (pagina de conexão com o BD)
	var resposta = req.responseText;
 
	// Resposta na div do campo que fez a requisição
	document.getElementById('campo_'+ campo +'').innerHTML = resposta;
	}
 
}
 
req.send(null);
 
}

Obs: esse arquivo recebe os dados de 1 input do index.html e manda para o validacao.php.

 

porem, por minha falta de experiência gostaria de perguntar:

 

onde insiro um comando que mude a cor da borda do input para "verde" quando OK ou "vermelho" quando ERRO?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dentro do:

if(req.readyState == 4 && req.status == 200) {
//
}
vai ser um teste:
if( req.responseText=='<img src="erro.PNG">' )
{
	var codigo = document.getElementById('codigo')
	codigo.style.borderWidth = '1px';
	codigo.style.borderColor = '#f00';
	codigo.style.borderStyle = 'solid';
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito