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 Alandeoli
      Boa noite Pessoal!
       
       
      Estou criando uma tela de login, e passando os dados para uma pagina que vai se conectar ao AD, mas mesmo eu colocando os campos em branco a conexão esta passando como ok, segue os códigos se puderem me ajudar agradeço muito!
       
      Tela conexao:
       
      <?php   $adServer = "ldap://xxx.xxxx.xx.xx";   $ldap = ldap_connect($adServer); $username = $_POST['user']; $password = $_POST['pass'];   $ldaprdn = 'XXX' . "\\" . $username;   ldap_set_option($ldap, LDAP_OPT_PROTOCOL_VERSION, 3); ldap_set_option($ldap, LDAP_OPT_REFERRALS, 0);   $bind = @ldap_bind($ldap, $ldaprdn, $password);   if($bind=true)   {   echo "conexão ok";     } else   {   echo "erro";     }   Tela Login:   <!DOCTYPE html> <html lang="pt-br"> <link href='css/login.css' rel='stylesheet' />


        <head> <meta charset="UTF-8"> <title>Tela de Login e Senha</title> </head>   <body> <div name="login" id="login"> <div name="box" id="box"> <form method="POST" action="ad.php" name="form"> Login : <input type="text" name="user" id="user"><br><br> Senha : <input type="password" name="pass" id="pass"><br><br> <input type="submit" value="Login" id="button"> </form> </div> </div>   </body>   </html>                                
    • By dutopfave
      Boa Tarde Galera, tenho um sistema de etiqueta que nele vai também código de barras, quando eu mostro na tela, funciona perfeitamente, mais quando gero pra pdf, com a biblioteca mPDF, da erro,  e é justo o código de barras q da esse erro, oq pode ser sera, segue o código de como ta:
       
      <?php require '../../Connections/config.php'; include "../Classes/funcoes.php"; include "cod.php"; $largura = 140; $altura = 130; include("mpdf60/mpdf.php"); // INICIO RECUPERA O ID DA ETIQUETA IMPORTADA $Row_Id_Etiqueta = addslashes($_GET['id_etiqueta']); $Recuperacao_Etiqueta = $pdo->prepare("SELECT * FROM tb_sys_etiqueta WHERE e_id = :e_id"); $Recuperacao_Etiqueta->bindValue(":e_id", $Row_Id_Etiqueta); $Recuperacao_Etiqueta->execute(); if($Recuperacao_Etiqueta->rowCount() > 0){ $Row_Recuperacao_Etiqueta = $Recuperacao_Etiqueta->fetch(); } // FIM RECUPERA O ID DA ETIQUETA IMPORTADA $id_etiqueta = $_GET['id_etiqueta']; $Lista_Etiqueta = "SELECT * FROM tb_sys_etiqueta WHERE e_id = '$id_etiqueta'"; $Lista_Etiqueta = $pdo->query($Lista_Etiqueta); if($Lista_Etiqueta->rowCount() > 0){ $etiqueta_id = $Lista_Etiqueta->fetch(); $qtd = $etiqueta_id['e_volume'] + 1; $qtd2 = $etiqueta_id['e_volume']; for ($i>0; $i<$qtd; $i++) { if($i>$etiqueta_id['e_pagina']){ // verificar se a pagina é menor que 10 if($i<10){ $n = '0'; }else{ $n = ''; } // verificar se a quantidade é menor que 10 if($etiqueta_id['e_volume']<10){ $nq = '0'; }else{ $nq = ''; } $html .= '<div class="etiqueta"> <div class="etiqueta-topo"> <img src="../images/logo.fw.png" width="116" height="52"> </div> <div class="etiqueta-empresa"> <div class="etiqueta-empresa-left"> <h1>GYN</h1> </div> <div class="etiqueta-empresa-right"> <h1>VOL: '.$n.''.$i.'/'.$nq.''.$qtd2.'</h1> </div> </div> <div class="etiqueta-endereco"> <div class="etiqueta-endereco-left"> <span><b>Remetente:</b></span><br/> <span>'.$etiqueta_id['e_remetente'].'</span><br/><br/> <span><b>Destinatário:</b></span><br/> <span>'.$etiqueta_id['e_destinatario'].'</span> </div> <div class="etiqueta-endereco-right"> '.geraCodigoBarra('232323232323').' <br /> '.$etiqueta_id['e_codigo_barras'].' <p>Goiânia/GO</p> </div> </div> </div>'; } } } $mpdf = new mPDF('utf-8', array($largura,$altura)); $css = file_get_contents("css/estilo.css"); $mpdf->WriteHTML($css,1); $mpdf->WriteHTML($html); $mpdf->Output(); exit;  
      a função pra gera o código de barras: cod.php
       
      <?php function geraCodigoBarra($numero){ $fino = 1; $largo = 3; $altura = 50; $barcodes[0] = '00110'; $barcodes[1] = '10001'; $barcodes[2] = '01001'; $barcodes[3] = '11000'; $barcodes[4] = '00101'; $barcodes[5] = '10100'; $barcodes[6] = '01100'; $barcodes[7] = '00011'; $barcodes[8] = '10010'; $barcodes[9] = '01010'; for($f1 = 9; $f1 >= 0; $f1--){ for($f2 = 9; $f2 >= 0; $f2--){ $f = ($f1*10)+$f2; $texto = ''; for($i = 1; $i < 6; $i++){ $texto .= substr($barcodes[$f1], ($i-1), 1).substr($barcodes[$f2] ,($i-1), 1); } $barcodes[$f] = $texto; } } echo '<img src="../images/p.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/p.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img '; $texto = $numero; if((strlen($texto) % 2) <> 0){ $texto = '0'.$texto; } while(strlen($texto) > 0){ $i = round(substr($texto, 0, 2)); $texto = substr($texto, strlen($texto)-(strlen($texto)-2), (strlen($texto)-2)); if(isset($barcodes[$i])){ $f = $barcodes[$i]; } for($i = 1; $i < 11; $i+=2){ if(substr($f, ($i-1), 1) == '0'){ $f1 = $fino ; }else{ $f1 = $largo ; } echo 'src="../images/p.gif" width="'.$f1.'" height="'.$altura.'" border="0">'; echo '<img '; if(substr($f, $i, 1) == '0'){ $f2 = $fino ; }else{ $f2 = $largo ; } echo 'src="../images/b.gif" width="'.$f2.'" height="'.$altura.'" border="0">'; echo '<img '; } } echo 'src="../images/p.gif" width="'.$largo.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/b.gif" width="'.$fino.'" height="'.$altura.'" border="0" />'; echo '<img src="../images/p.gif" width="1" height="'.$altura.'" border="0" />'; } ?>  
    • By PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Randys
      Eu selecionei um elemento e adicionei a classe ativo nele, agora não estou conseguindo remover a classe quando eu seleciono outro elemento
      const article = document.getElementById(id); article.classList.add('ativo'); Eu preciso remover a classe ativo quando eu clicar em outro elemento article, como faço isso?
    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
×

Important Information

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