Ir para conteúdo
dutopfave

Verificando automático se o campo que digitei existe no banco de dados

Recommended Posts

Boa Noite, tenho um formulário e nele queria ver como faço, quando estou digitando nele se o campo existe no banco

 

exemplo, digitei um produto, ai ele me retorna se aquele produto existe se nao existi ele me mostra uma mensagem, sem atualiza a pagina

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu consigo fazer isso com JavaScript, dessa forma, tente adaptar ao seu gosto.

 

Javascript: (buscar.js)

var req;
 
// FUNÇÃO PARA BUSCA O PRODUTO
function buscarProduto(valor) {
 
// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
 
// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var url = "busca.php?produto="+valor;
 
// Chamada do método open para processar a requisição
req.open("Get", url, true); 
 
// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {
 
	// Exibe a mensagem "Buscando Noticias..." enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('resultado').innerHTML = 'Verificando...';
	}
 
	// Verifica se o Ajax realizou todas as operações corretamente
	if(req.readyState == 4 && req.status == 200) {
 
	// Resposta retornada pelo busca.php
	var resposta = req.responseText;
 
	// Abaixo colocamos a(s) resposta(s) na div resultado
	document.getElementById('resultado').innerHTML = resposta;
	}
}
req.send(null);
}

 

PHP: (busca.php)

<?php
include("../../includes/conn.php"); //include na conexao
 // Acentuação
header("Content-Type: text/html; charset=UTF-8",true);
// Recebe o valor enviado
$valor = $_GET['produto'];

//busca o sql

 $sql = "SELECT * FROM produtos WHERE nome = '$valor' ";
 if($result = $conn->query($sql)){	 
  $rowcount = mysqli_num_rows($result);
if($rowcount > 1){
  
  echo "<span style='color: red'>Produto já registrado.</span>";
 
}  
 }

 

HTML: (BuscarProduto.php)

<script type="text/javascript" src="buscar.js"></script>
<input type="text" placeholder="Produto" class="form-control" id="busca" onkeyup="buscarProduto(this.value)" />

<div id="resultado" class="resultado"></div>

 

Espero que resolva seu problema, att.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Um Jeito mais fácil é usar Jquery!

Então primeiramente vamos adicionar o Jquery no topo no nosso arquivo html... dentro das head

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

Verifique primeiro se já nao tem o Jquery no seu projeto!

 

Prosseguindo ->

 

O CAMPO DA BUSCA:

<input id="busca" type="text" class="form-control" placeholder="Buscar Cliente">
<p id="result"></p>

Repara que demos um id para esta input, é util mais tarde, mais precisamente agora.

O paragrafo com o id "result" , será aonde sera apresentado o resultado da pesquisa.

 

Na mesma pagina criamos este script!

<script>
      $("#busca").keyup(function(){
        var busca = $("#busca").val();
        $.post('busca.php', {busca: busca},function(data){
          $("#result").html(data);
        });
      });
      $("#busca").focusout(function(){
        $("#result").html("Pesquisar Por Clientes!");
      })
    </script>

Este pequeno script verifica quando o usuario esta digitando da input, entao manda para o arquivo php oque sta sendo digitado para poder fazer a consulta no banco de dados.

busca.php :

<?php
$conn  = mysqli_connect('localhost','root','','busca');
$busca =  $_POST['busca'];
$query = mysqli_query($conn, "SELECT * FROM clientes WHERE nome LIKE '%$busca%'");
$num   = mysqli_num_rows($query);
if($num >0){
    while($row = mysqli_fetch_assoc($query)){
      echo $row['nome'].' - '.$row['email'].'<br /><hr>';
    }
}else{
  echo "Esta Pessoa Não Existe!";
}
?>

Mais informações: https://github.com/luannsr12/Aula_busca_com_Jquery

E está feito! Abç

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por VCastilho
      Bom Dia

      Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
      Segue o código:
       
      <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

       
    • Por MateusDuarte
      Podem me ajudar? Sou novato em PHP e estou precisando de uma ajudinha.
      Tenho 2 tabelas no banco: filmes e generos.
      Faço o cadastro individual de todos os generos na tabela generos, e no cadastro de filmes eu puxo todos os generos por um multiple select. Até ai tudo certo, ele salva no banco de dados assim:
      genero1, genero2, genero3.
       
      Porém na hora de mostrar eu não sei separar eles das virgulas.
      Segue meu SELECT simples:
      <main class="content"> <?php $sql = "SELECT * FROM genero ORDER BY RAND()"; $result = $connect->query($sql); if($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $teste = $row["id_genero"]; ?> <section class="panel"> <h2><a id="links-generos" href="generos-filmes.php?id=<?php echo $row['id_genero'];?>"><?php echo $row["descricao"];?></a></h2> <div class="recentslider"> <div class="swiper-container"> <div class="swiper-wrapper"> <?php $sql_t = "SELECT * FROM filmes WHERE id_genero = ".$teste." ORDER BY RAND()"; $result_t = $connect->query($sql_t); if($result_t->num_rows > 0) { while($row_t = $result_t->fetch_assoc()) { ?> <div class="swiper-slide"><?php echo "<a href='single-filmes.php?id=".$row_t['id_filme']."&genero=".$row_t['id_genero']."';>";?><img src="capa/<?php echo $row_t["capa_filme"];?>"><h3 class="hometitle"><?php echo $row_t["titulo_filme"];?></h3></a></div> <?php }} else { echo "0 results"; } ?> </div> <div class="nextdirection recent-next"><img src="img/right-arrow.svg"> </div> <div class="leftdirection recent-prev"><img src="img/left-arrow.svg"> </div> </div> </div> </section> <?php }} else { echo "0 results"; } ?> </main> (Desculpa se não ficou alinhado, só copiei e colei.)

      Reparem que primeiro dou um select na tabela genero, e salvo o ID dela em uma variavel, e depois vou um select na tabela filmes usando a variavel que salvei antes como uma condição.
      Porem na tabela filmes, os generos estão salvos separados por virgula. Como consigo fazer um select separando ela das virgulas?
       
    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
    • Por explosivemineyt
      Bom dia,
      Eu encontro-me a tentar realizar um formulário login do tipo google, mas apesar de estar a funcionar, por vezes quando recarrego a pagina aparece assim e tenho que carregar na pagina ou no campo ou outro local qualquer para atualizar.
       
      Gostaria de conseguir corrijir mas apesar de pesquisar não encontro como corrijir.
       
      o meu código html: 
      Meu código css: 
      Meu bootstrap.css(ficheiro muito grande, posso disponibilizar por um drive ou algo do genero) bootstrap versão v4.0.0
       




×

Informação importante

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