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 gersonab
      Boa tarde a todos, tenho um sistema de upload de arquivos que funciona perfeitamente, agora eu gostaria que estes arquivos fossem armazenados em nuvem, não no servidor, poderiam indicar um tutorial ou como proceder.
    • By Diego-SLP
      Bom dia,
       
      Teria como eu fazer um UPDATE na minha base colocando através de um FORM o VALOR_UNITARIO sendo que a QUANTIDADE já tenho na base de dados, e assim, atualizar o campo VALOR FINAL já? 
       
      Vou atualizar varios registros de uma vez.
    • By magegamer07
      Galera, estou a muito tempo pesquisando como remover isso do resultado final do meu site 
       
      <dl class="variation">Início: 17 de julho de 2020</dl>
      Eu apenas gostaria que ele me retornasse o seguinte valor
      Início: 17 de julho de 2020
       
      É uma função que estou tentando fazer no wordpress junto ao woocommce para que na hora de clicar em finalizar compra, ele me redirecione ao WhatsApp com os itens do meu carrinho,
      Tudo vai bem, com exceção desse bendito <dl class..
      tem como ocultar isso?
       
      Quando a mensagem chega no whats, ela vem da forma que mostrei a cima com o DL
       
      Estou fazendo isso dentro de /public_html/wp-content/plugins/woocommerce/templates/order/order-details.php
       
      Tenho pouco conhecimento em php, por favor me ajudem 
       
      GRATIDÃO!
       
       
    • By _danf
      Senhores, boa noite!
      Possuo um cadastro em php é SQL Server.
      queria adicionar uma função, que ao selecionar um item do select fizesse um insert numa tabela especifica do DB
      Exemplo:
      <select id="select-faction"> <option value="opt">Escolha sua facção</option> <option value="1">Aliança da Luz (Light)</option> <option value="0">União da Fúria (Dark)</option> </select> Database GameData > Table UserMaxGrow > 
      Campos:
      RowID, ServerID, UserUID, Conntry (0 Luz, 1 Furia), MaxGrow (3), Del (false)
      Ao criar a conta, ele teria que inserir Por padrão:
       
       
      Exemplo:
      na imagem abaixo desde ja agradeço.

       
      Cadastro.php
      <?php require_once('db.config.php'); $user_ip = $_SERVER['REMOTE_ADDR']; $username = isset($_POST['username']) ? trim($_POST['username']) : ''; $password = isset($_POST['password']) ? trim($_POST['password']) : ''; $password2 = isset($_POST['password2']) ? trim($_POST['password2']) : ''; $email = isset($_POST['email']) ? trim($_POST['email']) : ''; $errors = array(); $success = false; // Processar os dados POST. if(isset($_POST) && !empty($_POST)){ // VALIDAR LOGIN if(empty($username)){ $errors[] = '<center><font color="#970808">E necessário um login*</font>'; }else if(strlen($username) < 3 || strlen($username) > 16){ $errors[] = '<center><font color="#970808">Seu login deve ter entre 3 e 16 caracteres.</font>'; }else if(ctype_alnum($username) === false){ $errors[] = '<center><font color="#970808">Seu login deve consistir de números e letras apenas.</font>'; }else{ // VERIFICA SE O LOGIN JÁ EXISTE. $sql = "SELECT UserID FROM PS_UserData.dbo.Users_Master WHERE UserID = ?"; $stmt = odbc_prepare($GLOBALS['dbConn'],$sql); $args = array($username); if(!odbc_execute($stmt,$args)){ $errors[] = '<center><font color="#970808">Não foi possível determinar se esse usuário já existe no banco de dados.</font>'; }elseif($row = odbc_fetch_array($stmt)){ $errors[] = '<center><font color="#970808">Login já existente, utilize outro.</font>'; } } // VALIDAR SENHA if(empty($password)){ $errors[] = '<center><font color="#A52A2A">Informe uma senha.</font>'; }else if(strlen($password) < 3 || strlen($password) > 16){ $errors[] = '<center><font color="#970808">A senha deve ter entre 3 e 16 caracteres.</font>'; }else if($password != $password2){ $errors[] = '<center><font color="#970808">As senhas não coincidem.</font>'; } // E-MAIL COM VALIDAÇÃO "O USUÁRIO NÃO PODE CRIAR UMA CONTA COM O MESMO E-MAIL". if(isset($_POST) && !empty($_POST)){ if(empty($email)){ $errors[] = '<center><font color="#970808">Informe um e-mail.</font>'; }else if(strlen($email) < 5 || strlen($email) > 30){ $errors[] = '<center><font color="#970808">O E-mail deve ter entre 5 e 30 caracteres de comprimento.</font>'; }else{ // VERIFICA SE O E-MAIL JÁ EXITE. $sql = "SELECT email FROM PS_UserData.dbo.Users_Master WHERE email = ?"; $stmt = odbc_prepare($GLOBALS['dbConn'],$sql); $args = array($email); if(!odbc_execute($stmt,$args)){ $errors[] = '<center><font color="#970808">Falha ao determinar se esse E-amil já existe no banco de dados.</font>'; }elseif($row = odbc_fetch_array($stmt)){ $errors[] = '<center><font color="#970808">O E-mail já foi usado. Escolha outro E-mail.</font>'; } } } // Persiste a nova conta no banco de dados se não ocorrerem erros anteriores. if(count($errors) == 0){ $sql = "INSERT INTO PS_UserData.dbo.Users_Master (UserID,Pw,JoinDate,Admin,AdminLevel,UseQueue,Status,Leave,LeaveDate,UserType,Point,EnPassword,UserIp,email) VALUES (?,?,GETDATE(),0,0,0,0,0,GETDATE(),'N',0,'',?,?)"; $stmt = odbc_prepare($GLOBALS['dbConn'],$sql); $args = array($username,$password,$user_ip,$email); if(odbc_execute($stmt,$args)){ $success = htmlentities("{$username}, seu cadastro foi finalizado com sucesso!"); }else{ // Isso significa que a instrução inserir provavelmente não é válida para seu banco de dados. Corrija a consulta ou corrija seu banco de dados, sua escolha;) $errors[] = '<center><font color="#970808">Problema ao tentar criar sua conta, tente novamente.</font>'; } } } // Determine which view to show. if($success === false){ require_once('cadastro.view.php'); }else{ require_once('success.view.php'); } ?>  
      cadastro.view.php
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="login.css"> <link rel="icon" href="https://img.icons8.com/officel/16/000000/code.png"> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet"> <title>Vamos lá? </title> </head> <body><br> <?php if(count($errors)){ ?> <ul id="error"> <?php foreach($errors as $error){ ?> <li><?php echo $error; ?></li> <?php } ?> </ul> <?php } ?> <div class="form-register"> <form action="cadastro.php" method="POST"> <h1>Criar uma nova conta</h1> <br><br> <input value="<?php if(isset($_POST['username'])){ echo $_POST['username']; } ?>" type="text" title="Login" placeholder="Login*" name="username"> <br><br><br> <input value="<?php if(isset($_POST['password'])){ echo $_POST['password']; } ?>" type="password" title="Senha" placeholder="Senha" name="password"> <br><br><br> <input value="<?php if(isset($_POST['password2'])){ echo $_POST['password2']; } ?>" type="password" title="Confirmar senha" placeholder="Confirmar senha" name="password2"> <br><br><br> <input value="<?php if(isset($_POST['email'])){ echo $_POST['email']; } ?>" type="mail" title="E-mail" placeholder="Endereço de e-mail" name="email"> <label>Utilize um e-mail válido para confirmação</label> <br><br> <select id="select-faction"> <option value="opt">Escolha sua facção</option> <option value="0">Aliança da Luz (Light)</option> <option value="1">União da Fúria (Dark)</option> </select> <br><br> <button type="submit">Cadastrar</button> <br><br> <h2><a href="index.html"> Já possui um acesso?</a></h2> </form> </div> </body> </html>  
    • By fideles
      Pessoal, tudo bem?
       
      Tenho uma pagina onde as pessoas me enviam NF para faturamento.
       
      Me perguntaram, é possível que essa pagina funcione por exemplo, somente os 15 primeiros dias do mês e os últimos 15 dias, elas permaneça fechada ou direcione para outra pagina mostrando "Período de envio fechado" (exibir a mensagem é tranquilo).
       
      Alguém imagina algo? Não consegui, sendo sincero mesmo.
       
×

Important Information

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