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 huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By Vinicius Bazan
      Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.
       O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.
       Ao todo tem 4 funções, a função relogio(), contador(), btd() e bte(), sendo que a btd e bte estão dentro da contador() 
       Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço
       
      OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.
       
       
    • By luialcantara
      Olá, a empresa onde trabalho tem uma página de login para área restrita que está com problema na função de cadastro. O formulário está enviando os dados para o banco de dados e o usuário se torna ativo para acesso normalmente. O problema é que a mesma função que salva os dados deveria redirecionar o cliente para a área restrita ou então para a página inicial para que ele digite usuário e senha e consiga acessar a página. 
       
      A página já estava pronta quando comecei aqui e eu não tenho domínio sobre php, mas já corrigi alguns erros que estavam impedindo o cadastro. Porém os clientes reclamam pois após concluir o cadastro a imagem de carregamento não desaparece, então apenas coloquei um delay para evitar os questionamentos, pois o usuário fica ativo, então é só voltar para o login que eles conseguem usar nosso site.
       
      A página está dividida entre uma de login (php), uma para cadastro (php) e a principal, que está no wordpress. 
       
      Função do formulário de cadastro:
                  submitHandler: function(form) {                 $(".botoesactions").hide();                 $(".ajaxloader").show();                 var dados = jQuery( form ).serialize();                  $(".ajaxloader").fadeOut(1500);                 $.ajax({type: "POST", data: dados, url:"<?php echo get_site_url(); ?>/atendimento/cadastrar",success: function(data){                     console.log(data);                     try {             var ret = JSON.parse(data);                     } catch (e) {          var ret = false;                    }                     $(".ajaxloader").hide();                     if(ret !== false && ret.retorno === "ok"){                         console.log(ret);                         alert("Cadastrado realizado com sucesso!");                         window.location.href = "<--!?php echo get_site_url(); ?-->/atendimento/";                     }else if(ret !== false && ret.retorno === "fail"){                         alert(ret.mensagem);                         $(".botoesactions").show();                     }else{                         $(".botoesactions").show();                     }                 }});             }  
       
      Função de inserção de informações no banco de dados:
      elseif('cadastrar' == $syjusaten){                         if(!isset($_SESSION) || !isset($_SESSION['jusate_session']['answeris']) || $_SESSION['jusate_session']['answeris'] != 42 ){                 if($_POST && $_POST['typos'] == "iscadastro"){                     $url= $urlServer.'/Cliente/ClienteSite/cadastraclientesite';                     $parms = array(                         "usuario" => $_POST['user'],                         "Senha" => $_POST['pass'],                         "Cliente.ClienteId" => $_POST['clienteId'],                         "Cliente.Nome" => $_POST['nome'] /*Existem outros dados, mas acho que ficaria muito codigo e não contribuem para erro*/                     );                     $respServer = syJuCurl($url, $parms);                     if($respServer == ""){                         echo json_encode( array(                             "retorno" => "fail",                             "mensagem" => "Não foi possivel realizar o cadastro. Tente novamente mais tarde"                         ));                     }else{     echo $respServer;                         }                 }else{                     echo "ELSEE";                     header("Location: ".get_site_url()."/atendimento");                 }                         exit;             }else{                 header("Location: ".get_site_url()."/atendimento/");             }         }  
      Agradeço pela atenção ;)
       
    • By digonaweb
      Bom dia!
       
      Alguém pode me ajudar com esse script abaixo?
       
      Preciso fazer com que o link abra em uma nova janela, pois fica abrindo em um quadrado onde está fisicamente o relógio no site.
       
      <!-- clock widget start -->
       
      <script type="text/javascript">
           var css_file=document.createElement("link");
           css_file.setAttribute("rel","stylesheet");
           css_file.setAttribute("type","text/css");
           css_file.setAttribute("href","//s.bookcdn.com//css/cl/bw-cl-150x70.css");
           document.getElementsByTagName("head")[0].appendChild(css_file);
      </script>
       
      <div id="tw_1_737904741"><div style="width:150px; height:70px; margin: 0 auto;">
      <a href="https://booked.net/time/rio-de-janeiro-18486">Rio de Janeiro</a>
      <br/></div></div>
       
      <script type="text/javascript"> function setWidgetData_737904741(data){ if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = ''; var params = data.results; objMainBlock = document.getElementById('tw_'+params.widget_type+'_'+params.widget_id); if(objMainBlock !== null) objMainBlock.innerHTML = params.html_code; } } } var clock_timer_737904741 = -1; </script> <script type="text/javascript" charset="UTF-8" src="https://widgets.booked.net/time/info?ver=2&domid=209&type=1&id=737904741&scode=124&city_id=18486&wlangid=1&mode=1&details=0&background=ece0bf&color=4c4d57&add_background=ffffff&add_color=2071c9&head_color=ffffff&border=1&transparent=1"></script>
       
      <!-- clock widget end -->
       
       

       
       

    • By Vinicius Bazan
      Galera to com uma duvida aqui, no javascript é possível fazer uma função dentro de outra e uma acessar os valores de uma var da outra?
       
      Por exemplo digamos que eu tenha uma function a() e uma function b(), eu preciso que a function a utilize valores de variáveis que estarão na function b, se isto for possível a função b terá que estar dentro de a ou seria ao contrario?
×

Important Information

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