Jump to content
josenilson

Enviar o dado de um input para outra pagina via ajax

Recommended Posts

Olá pessoal, preciso enviar um dado vindo de um input para outra pagina via ajax, como posso preencher o exemplo abaixo o código esta incompleto e sou iniciante com ajax  . 

 

Obs: tenho que usar  o método onblur no input para a função ser disparada assim que usuário sair do mesmo . 

 

<script>
function buscacpf() {
  $(document).ready(function(){
  $('#cpf').change(function(){
    var cpf = $(this).val();
    var data = 'cpf='+cpf;
    $.ajax({
      type : "POST",
      url : "valida.php",
      data : data,
      cache : false,
      success: function(html)
      {
            $('#cpf').html(html);
      }

    })

  });
});

}
</script>     

abaixo o input . 

 

 <input  name="cpf" id="cpf" onblur="buscacpf()">
                    

para resumir seria assim, o usuário digita o cpf nesse input e ao sair dele ou clicar em outro campo a função envia o cpf do mesmo para a pagina valida.php

Share this post


Link to post
Share on other sites

@josenilson Bom, tem pequenos erros operacionais nesse seu código.

 

Não existe a necessidade de usar o evento pronto para documentos, quando o script está dentro de uma função.

 

Você também não precisa declarar a função dentro do atributo onblur, já que você está usando Jquery, você pode anexa um manipulador de eventos ao elemento input.

 

Um exemplo de código que funcionaria na sua aplicação:

$(document).ready(function(){
 		$("#cpf").on("blur, change", function(){
		    $.ajax({
		      	method: "POST",
		      	url: "validar.php",
		      	data: { 
		      		"cpf":this.value 
		      	},
		      	cache: false,
		      	success: function(res)
		      	{
		            $(this).html(res);
		      	}

		    })
 		})
 	})

Bom esse código só vai funcionar em Jquery de versão maior que  1.9.

 

Usando o método on do Jquery, você pode remover o atributo onblur do input.

<input type="text" name="cpf" id="cpf">

Lembre de adicionar um tipo(type) ao <input>.

Share this post


Link to post
Share on other sites

Mano Obrigado 

Em 04/05/2019 at 06:48, gabrielms disse:

@josenilson Bom, tem pequenos erros operacionais nesse seu código.

 

Não existe a necessidade de usar o evento pronto para documentos, quando o script está dentro de uma função.

 

Você também não precisa declarar a função dentro do atributo onblur, já que você está usando Jquery, você pode anexa um manipulador de eventos ao elemento input.

 

Um exemplo de código que funcionaria na sua aplicação:


$(document).ready(function(){
 		$("#cpf").on("blur, change", function(){
		    $.ajax({
		      	method: "POST",
		      	url: "validar.php",
		      	data: { 
		      		"cpf":this.value 
		      	},
		      	cache: false,
		      	success: function(res)
		      	{
		            $(this).html(res);
		      	}

		    })
 		})
 	})

Bom esse código só vai funcionar em Jquery de versão maior que  1.9.

 

Usando o método on do Jquery, você pode remover o atributo onblur do input.


<input type="text" name="cpf" id="cpf">

Lembre de adicionar um tipo(type) ao <input>.

Obrigado pela ajuda, como eu faço na pagina valida.php para buscar o resultado do ajax ? ou seja para ver se o dado esta sendo enviado para ela ?

Share this post


Link to post
Share on other sites
31 minutos atrás, josenilson disse:

Mano Obrigado 

Obrigado pela ajuda, como eu faço na pagina valida.php para buscar o resultado do ajax ? ou seja para ver se o dado esta sendo enviado para ela ?

 

- Na página valida.php coloque um var_dump, que por sua vez,

será responsável por retornar os dados do $_POST para o ajax!

 

CÓDIGO

<?php
	var_dump (
		$_POST
	);

 

 

2º - Na"função" responsável por determinar o "sucesso da requisição"

ajax, adicione um alert para exibir os dados do var_dump

 

CÓDIGO

$(document).ready(function(){
	$("#cpf").on("blur, change", function(){
	    $.ajax({
	      	method: "POST",
	      	url: "valida.php",
	      	data: { 
	      		"cpf":this.value 
	      	},
	      	cache: false,
	      	success: function(res)
	      	{
	            alert ( res );
	      	}
	    })
	})
})

 

Assim, quando você inserir algo no INPUT e clicar em alguma parte 

do corpo da página, será exibida um alerta com os dados!

Share this post


Link to post
Share on other sites
22 horas atrás, ShadowDLL disse:

 

- Na página valida.php coloque um var_dump, que por sua vez,

será responsável por retornar os dados do $_POST para o ajax!

 

CÓDIGO


<?php
	var_dump (
		$_POST
	);

 

 

2º - Na"função" responsável por determinar o "sucesso da requisição"

ajax, adicione um alert para exibir os dados do var_dump

 

CÓDIGO


$(document).ready(function(){
	$("#cpf").on("blur, change", function(){
	    $.ajax({
	      	method: "POST",
	      	url: "valida.php",
	      	data: { 
	      		"cpf":this.value 
	      	},
	      	cache: false,
	      	success: function(res)
	      	{
	            alert ( res );
	      	}
	    })
	})
})

 

Assim, quando você inserir algo no INPUT e clicar em alguma parte 

do corpo da página, será exibida um alerta com os dados!

Então deu certo aqui, mas como eu coloco esse resultado para aparecer centro de uma div ou em um h1  sem ser com esse alert ?

Share this post


Link to post
Share on other sites

Segue exemplo:

 

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<title> TESTE </title>

		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>

	<body>
		<input type="text" id="cpf" name="cpf" />

		<div class="result" style="border: 1px solid #000; padding: 20px; margin-top: 30px; width: 30%"></div>

		<script type="text/javascript">
		$(document).ready(function(){
			$("#cpf").on("blur, change", function(){
			    $.ajax({
			      	method: "POST",
			      	url: "script.php",
			      	data: { 
			      		"cpf":this.value 
			      	},
			      	cache: false,
			      	success: function(res)
			      	{
			      		$ ( '.result' ).text ( res );
			      	}
			    })
			})
		})
		</script>
	</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Pellegrini3834
      Ola galera do IMasters!!!!!!
       
      Estou com uma duvida eu tenho um CRUD em php MVC e queria saber em que camada fica as mensagens depois de uma realização de um evento por exemplo:
      Cadastro de Pessoa, depois de cadastrada quero que ele emita uma mensagem dizendo que a "PESSOA FOI CADASTRADA COM SUCESSO!!!!" e eu queria saber  em que parte ela fica se é no Controle ou na View porque sabemos que no modelo fica a parte referente a manipulação de dados.
      Obrigado.
    • By Henrique Augusto Rohloff
      Olá! Sou iniciante e estou treinando para configurar uma página de buscas de produtos em um banco de dados.
      Os produtos já estão sendo encontrados quando a palavra bate com os itens do banco. A conexão com o banco de dados está funcionando corretamente. Porém, quando nada é encontrado, queria que aparecesse uma mensagem "Nenhum resultado, tente novamente." Já tentei com  else de tudo que é jeito mas não aparece corretamente... Qual é o jeito certo?
       
      Segue o código:
       
       
    • By maruoppolo
      Olá, tenho 2 tabelas:
       
      tb_dados: ID - MUSICA
       
      tb_votos: ID - VOTO - RADIO - MUSICA
       
      Preciso fazer uma query que traga as musicas da tb_dados porém ordenando pelo número de votos que ela teve na tb_votos.
       
      Então assim, existem 2 tipos de voto 1 = like e 2 = dislike, cada ver que um usuário vota eu pego qual radio que ele esta ouvindo e salvo no campo radio, o id da musica na tb_dados e salvo no campo musica da tb_votos e coloco o número 1 para like e 2 para dislike no campo voto.
       
      A query precisa contar quantos likes teve na tv_votos filtrando por radio e mostrando os resultados em ordem decrescente as musicas com mais likes.
       
      A ideia é trazer as 10 musicas com mais like de cada radio
       
      Alguma ideia de como fazer?? Estou enroscado nisso a dias.
    • By Chester1
      oi, eu to tentando mexer com servidores agora no PHP e esta dando um erro muito estranho que quando eu procuro em um programa que acha erros de sintaxe ele me diz que o erro esta no </HTML>    se alguem puder me dizer qual foi o erro que eu cometi eu agradeceria
       

       
      <HTML> <HEAD><TITLE>incluindo no banco de dados</TITLE></HEAD> <body> <BODY bgcolor="#d0d0d0"> <center> <h3>Lanchonete coma bem (voltada para o internauta)</h3> <h1>24horas</h1> <?php $login_digitado=$_POST['login']; $senha=$_POST['senha']; $nome=$_POST['nome']; $email=$_POST['email']; $telefone=$_POST['telefone']; $celular=$_POST['celular']; $endereco=$_POST['endereco']; $complemento=$_POST['complemento']; if ($login_digitado == "" || $senha == "" || $nome =="" || $email == "" || $telefone == "" || $endereco == "" || $complemento == "") { echo "existem(m) campos(s) de preenchimento obrigatorio em branco,<BR> infelizmente tera que voltar para preenche-lo(s)."; echo "<BR><a href=\"cadastro.php\">clique aqui para tentar novamente</a>"; } else { { $link=mysql_connect("localhost", "root", "") or die ("<h1>nao foi possivel conectar !!!</h1> ".mysql_error());  
      obs :estou trabalhando com formularios e servidores
         
         
         
         
      ?>
      </BODY>
      </HTML>
    • By DavidPin94
      Boa tarde, estou tentando criar uma validação para saber se o usuário já está cadastrado no meu banco de dados para meu sistema ficar mais organizado, porém quando realizo o teste cadastrando um usuário já cadastrado, o cadastro ocorre sendo que não era para ocorrer
      <?php require_once("conexao.php");?> <?php if (isset($_POST['usuario'])) { $nome = utf8_decode($_POST['usuario']); $senha = utf8_decode($_POST['senha']); $inserir = "INSERT INTO cadastro "; $inserir .= "(usuario, senha) "; $inserir .= "VALUES "; $inserir .= "('$nome', '$senha')"; $query = "SELECT usuario FROM cadastro WHERE usuario = '$usuario' LIMIT 1"; $consulta = mysqli_query($conecta, $query); $query = "SELECT usuario FROM clientes WHERE usuario = '$usuario' LIMIT 1"; $consulta = mysqli_query($conecta, $query); if (mysqli_num_rows($consulta) < 1) { $operacao_inserir = mysqli_query($conecta, $inserir); if (! $operacao_inserir) { die("Erro no banco"); }else header("location: login.php"); }else{ die("Usuário existente!"); } } ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Cadastrar novo usuário</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <nav> <ul> <li><a href="inicial.php">PÁGINA INICIAL</a></li> <li><a href="quem_somos.php">QUEM SOMOS</a></li> </ul> </nav> <div id="cadastro"> <form method="post" action="cadastro.php"> <label>Digite seu nome de usuário</label> <input type="text" name="usuario" placeholder="Ex: Usuario123" required size="50" minlength="5" maxlength="20" autofocus><br> <label>Digite sua senha</label> <input type="password" name="senha" placeholder="Deve conter mais de 5 caracteres" required size="50" minlength="5" maxlength="20" autofocus><br> <input type="submit" value="Cadastrar" id="enviar" name="enviar"> </form> </div> </body> </html> ,  alguém poderia me ajudar?  Meu código:
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.