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 Alberto Nascimento
      Preciso que o nome do arquivo que foi salvo durante o registro de um formulário, ao ser exibido através de uma busca e mostrado em ECHO possa se tornar um link.
      Como consigo fazer isso?
       
      echo "<a href="http://www.meusite.com.br/app/".$rows_cursos['novonome'].";  
       
    • By Onaita
      Boa noite, preciso de uma ajuda com o código abaixo:
      - Dentro da variável '$dados' tenho uma array em que o id repete com datas diferentes, preciso descartar uma das duas arrays repetidas com o mesmo 'id', mantendo a de menor data, ou seja, o resultado final seria:
      "Array ( [0] => Array ( [id] => 12 [data] => 2020-07-02 ) , [1] => Array ( [id] => 13 [data] => 2020-06-10 ) ) "
      - já tentei de tudo um pouco a princípio estou trabalhando com a ideia de loop dentro de loop, para varrer e comparar, mas como vcs podem ver estou deixando passar alguma coisa;
      <?php
      $dados =     [array("id" =>12, "data"=>"2020-07-02"),
                  array("id" =>13, "data"=>"2020-06-10"),
                  array("id" =>13, "data"=>"2020-06-15"),
                  array("id" =>12, "data"=>"2020-05-12")];
      $total = count($dados);
      foreach($dados as $item){
          for($i=1; $i < $total; $i++){
              if($item['id'] == $dados[$i]['id']){
                  if(strtotime($item['data']) <= strtotime($dados[$i]['data'])){
                      unset($dados[$i]);
                      $dados = array_values($dados);
                      $total = count($dados);
                      
                  }    
              }    
          }    
      }
      print_r($dados);
      Array ( [0] => Array ( [id] => 12 [data] => 2020-07-02 ) ) //resultado
       
      Se alguém achar o erro, ou uma forma de resolver esse problema ficarei muito agradecido!
      Obrigado e Um grande abrs a todos!
    • By jribeirojr
      Olá pessoal boa tarde, gostaria de saber se conseguem me ajudar.
      Hoje tenho um sistema que contempla o site e uma área administrativa, tudo feito em Codigniter, mas que começou a ficar muito grande, devido as diversas funcionalidades e estava pensando em reestruturar, mas estou bem confuso como poderia estruturar, se criando um RESTFull e conectando tanto o site quanto o administrativo, usar php com um VUE, React, Node, etc.
      Fico imaginando o seguinte e gostaria da opinião de vcs:
      - criar um restfull através de uma url tipo api.dominio.com.br
      - criar as conexões do admin usando react ou vue onde o usuário acessaria pela url app.dominio.com.br
      - criar as conexões do site usando react ou vue onde o usuário acessaria pela url www.dominio.com.br
       
      O que acham? Fico com receio da quantidade de administração / controle que teria para poder atualizar, etc. Conseguiriam me dar uma luz?
       
      Lembrando que este sistema posso usar para diferentes clientes com o mesmo nicho de negócio, se alguém puder me ajudar agradeço e desculpe o email longo, eu hoje uso PHP, MySQL, Mustache, JQuery
       
      Obrigado
       
    • By Alberto Nascimento
      Estou tentando, mas não esta exibindo o registro...
       
      localizar.php
       
      <?php session_start(); $_SESSION["localizarfotografia"] = $_POST["codphoto"]; ?> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>EXIBIR FOTOGRAFIA PELO CÓDIGO INTERNO</title> <style type="text/css"> <!-- .Style6 {font-size: 13px} .auto-style20 { text-align: center; } .auto-style22 { background-color: #FEB624; } .auto-style23 { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: xx-small; text-align: center; } .auto-style25 { background-color: #FFCC66; } .auto-style26 { font-size: x-small; } .auto-style27 { font-size: x-small; text-align: center; } .auto-style28 { text-align: center; background-color: #FEB624; } --> </style> </head> <body style="margin-top: 50"> <body onload="form1.login.focus();"> <form id="form1" name="form1" method="post" action="pesquisaragora.php"> <div class="auto-style20"> <table align="center" cellpadding="0" cellspacing="0" class="auto-style23" style="width: 500"> <tr> <td class="auto-style20"> &nbsp;</td> </tr> <tr> <td class="auto-style22"> &nbsp;</td> </tr> <tr> <td class="auto-style25" style="height: 41px">Informe o código da FOTOGRAFIA abaixo</td> </tr> <tr> <td class="auto-style25"> <table align="center" style="width: 450"> <tr> <td class="auto-style27"><span class="Style6"> <label> <input name="codphoto" type="text" id="codphoto" style="width: 305px; height: 83px;" /></label></span></td> </tr> <tr> <td class="auto-style26"><strong> </strong></td> </tr> <tr> <td class="auto-style20"><span class="Style6"> <label> <input type="submit" name="Submit" value="LOCALIZAR PHOTO" /></label></span></td> </tr> </table> </td> </tr> <tr> <td class="auto-style25">&nbsp;</td> </tr> <tr> <td class="auto-style28"> &nbsp;</td> </tr> </table> <br></div> </form> </body> </html>  
      pesquisarphoto.php
       
      <?php include("config.php"); $codphoto = $_POST['codphoto']; $sql_logar = "SELECT * FROM photos WHERE codphoto = '$codphoto'"; $exe_logar = mysql_query($sql_logar) or die (mysql_error()); $fet_logar = mysql_fetch_assoc($exe_logar); $num_logar = mysql_num_rows($exe_logar); $codphoto = $fet_logar['codphoto']; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; if ($num_logar == 0){ echo "Desculpe, mas a foto não foi localizada."; echo "<br><a href='javascript:window.history.go(-1)'>Clique aqui e tente novamente.</a>"; } else{ session_start(); $_SESSION['codphoto'] = $codphoto; $nome = $fet_logar['nome']; $cidade = $fet_logar['cidade']; $uf = $fet_logar['uf']; echo $exibir["codphoto"]; echo $exibir["nome"]; echo $exibir["cidade"]; echo $exibir["uf"]; } ?>  
       
       
       
       
       
       
       
       
    • By SaraAlcaras
      Olá galera! Estou criando um jogo da velha para coloca no meu portfólio, porem estou com um pequeno problema que não consigo resolver.. Quando o jogo finaliza a tela da uma ampliada/expandida no tamanho é quase imperceptível porem é algo que eu gostaria de mudar. Qual propriedade posso usar no css pra evitar que isso aconteça?
       
      Código CSS:

       
      :root{ --O-color: rgb(10, 177, 243); --X-color: rgb(253, 148, 148); --E-color: rgb(0, 0, 0); } * { margin: 0; padding:0; box-sizing: border-box; } body { display: grid; align-items: center; justify-content: center; font-family: grenze; height: 100vh; background-color: rgb(153, 153, 153); } .nextPlayer{ color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); } .players { color: rgb(60, 62, 63); border: 1px solid rgb(211, 223, 104); box-shadow: 3px 5px 12px rgb(0, 0, 0); height: 55px; display: flex; flex-direction: column; justify-content: space-evenly; } .player{ display: flex; } .topo { display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; margin-bottom: 20px; } .topo .players, .topo .nextPlayer { font-family: grenze; font-weight: bold; border-radius: 4px; } .title { font-size: 3rem; color: rgb(60, 62, 63); margin-bottom: 0; } .title2 { display: none; } .board { display: grid; grid-template-columns: repeat(3, 178px); grid-template-rows: repeat(3, 130px); gap: 1rem; cursor: pointer; } .board.game-over{ opacity: 0.10; } .cell { display: grid; align-items: center; justify-content: center; background-color: white; border-radius: 4px; font-size: 2rem; font-weight: bold; color: #00000066; } .cell:not(.O):not(.X):hover { box-sizing: 0 20px 25px -5px rgba(0, 0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0, 0.4); } .cell.O, .cell.X, .game-over .cell { cursor: not-allowed; } .cell.O { background-color: var(--O-color); } .cell.X { background-color: var(--X-color); } footer{ text-align: center; font-size: 30px; } .winner-message{ margin: 1rem; } .winner-message span.O{ color: var(--O-color); } .winner-message span.X{ color: var(--X-color); } .winner-message span.E{ color: var(--E-color); } button { padding: 0.9rem 1.5rem; border: none; border-radius: 5px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0, 0.6); background-color: rgb(68, 255, 146); color: white; font-size: 1.2rem; cursor: pointer; } @media only screen and (max-width: 767px) and (orientation:portrait) { body { width: 100%; text-align: justify; } .board{ grid-template-columns: repeat(3, 88px); grid-template-rows: repeat(3, 80px); -webkit-tap-highlight-color: transparent; } button { font-size: 10px; } .cell { border-radius: 3px; font-size: 1rem; } footer { font-size: 13px; } .title { font-size: 1.5rem; display: none; padding: 0.6em; /* transform: translateY(80%); */ } .title2 { display: flex; font-size: 1.5rem; padding: 0.6em; color: rgb(60, 62, 63); } .topo{ flex-direction: column; } .players { height: 65px; width: 95px; align-items: center; } .nextPlayer{ text-align: center; height: 22px; width: 118px; /* transform: translateY(-150%); */ } } @media only screen and (max-width: 767px) and (orientation:landscape) { body { width: 100%; text-align: justify; } .board { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); -webkit-tap-highlight-color: transparent; } footer { font-size: 0.5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } button { font-size: 0.5rem; } .title { font-size: 0.8rem; } .players{ height: 30px; width: 50px; align-items: center; font-size: 0.5rem; } .nextPlayer{ text-align: center; height: 14px; width: 60px; font-size: 0.5rem; } .cell { border-radius: 3px; font-size: 0.8rem; } } @media only screen and (min-width: 991px) and (max-width: 1200px) { body { width: 100%; text-align: justify; } }

×

Important Information

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