Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ndias

Gravar com click button - Jquery + AJAX

Por , em Javascript

Recommended Posts

ndias    2

ndias
Postado

Tenho um único formulário que está dividido em 5 partes...

 

A cada etapa, tem um botão avançar para o próximo...

 

Eu queria pegar os dados desse click e gravar no banco...

 

Segue meu código:

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

 

<script type="text/javascript">

 

$(document).ready(function(){
$('#enviar').click(function(){
var dados = $( this ).serialize();
$.ajax({
type: "POST",
url: "processa.php",
data: dados,
success: function( data )
{
alert( data );
}
});
return false;
});
});
</script>
<form>
<input type="text" name="nome" value="" />
<input type="text" name="email" value="" />
<button id="enviar" type="button">Próximo</button>
</form>
Alguém pode me dizer o que estou fazendo de errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ndias    2

ndias
Postado

Junior, não dá erro! O alert imprime o código fonte da página...

 

Eu preciso no success enviar via POST uma requisição para receber na página "processa.php" as variáveis com os valores...

 

Não estou sabendo como passar as variáveis dinamicamente...

 

Eu não queria, por exemplo fazer isso:

 

var nome = document.getElementById("nome").value

var email = document.getElementById("email").value

 

E no data do Ajax fazer isso:

 

data: {'nome':nome,'email':email},

 

Pois senão eu teria que montar um JQuery desse a cada etapa...e o formulário tem 5 partes...

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

O buraco é mais embaixo.

 

O elemento this se refere a ele mesmo...

<script type="text/javascript">
	$(document).ready(function(){
	
		$( "#enviar" ).bind( "click", function() {
				$.ajax({
					type: "POST",
					url: "processa.php",
					data: $("#js-dados *").serialize(),
					success: function( data ){
						//alert( data );
						console.log(data);
					}
				});

				return false;
			});
		});
	});
 
</script>
 

<div id="js-dados">
	<input type="text" name="nome" value="" />
	<input type="text" name="email" value="" />
	<button id="enviar" type="button">Próximo</button>
</div>

Repare que no parâmetro data do meu exemplo passamos o id 'js-dados' (que é o ID da div)

data: $("#js-dados *").serialize()

Já no seu ele falava this do button... o que provavelmente não era seu objetivo

 

Da uma pesquisada sobre this para entender melhor, tem um bacana no tabless

http://tableless.com.br/javascript-entendendo-o-this/

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

o #4 resolve a parte de passar os dados.

A questão de receber você precisa tratar diferente.

E é uma coisa que até hoje não sei a 'melhor maneira' ... se é que existe alguma.

 

Eu normalmente separo por 'etapas'.

 

ex:

coloco um hidden em cada etapa e dentro do post é passado...

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<div id="dados-pessoais">
	<input type="hidden" name="passo" value="dados-pessoais"/>
	<p>Nome</p>
	<input type="text" name="nome" value="" />
	<p>Email</p>
	<input type="text" name="email" value="" />
	<br /><br />
	<button id="btn-dados-pessoais">Btn Dados</button>
</div>

<div id="dados-opcional" style="display: none;">
	<input type="hidden" name="passo" value="dados-opcional"/>
	<p>Opção 1</p>
	<input type="text" name="opcao" value="" />
	<p>Opção 2</p>
	<input type="text" name="opcaox" value="" />
	<br /><br />
	<button id="btn-dados-opcional">Btn Dados</button>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$( "#btn-dados-pessoais" ).bind( "click", function() {
			//Validação
			var validacao = true;
			if(!validacao){
				return false;
			}
			
			//ajax...
			//No caso utilizar o 
			//$( "#dados-pessoais *" ).serialize();
			 
			
			//Fim, passo 2....
			$('#dados-pessoais').hide();
			$('#dados-opcional').show();
			return false;
		});
		
		$( "#btn-dados-opcional" ).bind( "click", function() {
			//Validação
			var validacao = true;
			if(!validacao){
				return false;
			}
			//ajax...
			//$( "#dados-opcional *" ).serialize();
			alert('Cadatro finish...');
			
			return false;
		});
	});
</script>

</body>
</html>

Ai dentro do arquivo que recebe fica por etapas o processamento.

Ex:

<?php

if($_POST){
	switch($_POST['']){
		case 'dados-pessoais':
		
		break;
		
		case 'dados-opcional':
		
		break;
	
	
	}

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

ndias    2

ndias
Postado

Gabriel, vamos ver se entendi bem...

para passar os dados eu faço assim:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form" id="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div id="dados-pessoais">
<input type="hidden" name="passo" value="dados-pessoais"/>
<p>Nome</p>
<input type="text" name="nome" value="" />
<p>Email</p>
<input type="text" name="email" value="" />
<br /><br />
<button id="btn-dados-pessoais">Btn Dados</button>
</div>

<div id="dados-opcional" style="display: none;">
<input type="hidden" name="passo" value="dados-opcional"/>
<p>Opção 1</p>
<input type="text" name="opcao" value="" />
<p>Opção 2</p>
<input type="text" name="opcaox" value="" />
<br /><br />
<button id="btn-dados-opcional">Btn Dados</button>
</div>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$( "#btn-dados-pessoais" ).bind( "click", function() {

$.ajax({
type: "POST",
url: "processa.php",
data: $( "#dados-pessoais *" ).serialize(),
success: function( data ){
//alert( console.log(data) );
console.log(data);
}
});

$('#dados-pessoais').hide();
$('#dados-opcional').show();
return false;
});

$( "#btn-dados-opcional" ).bind( "click", function() {

$.ajax({
type: "POST",
url: "processa.php",
data: $( "#dados-opcional *" ).serialize(),
success: function( data ){
//alert( console.log(data) );
console.log(data);
}
});

return false;
});
});
</script>

</body>
</html>

e para receber eu faço assim:

<?php

if($_POST){

$dados = array();

/* PERCORRO TODOS OS CAMPOS E O CONTEÚDO DESSES CAMPOS */
foreach($_POST as $nome => $valor) {
/* VERIFICO SE NENHUM CAMPO ESTÁ VAZIO */
if(!empty($valor)) {
$dados[$nome] = strip_tags($valor);
}
$valores = "'".iconv("UTF-8", "ISO-8859-1", $valor)."'";
$montaString = $string .$nome. "=" .$valores.", ";
$string = $montaString;
}

/*REALIZO A GRAVAÇÃO NO BANCO DE DADOS */
switch($_POST['']){
case 'dados-pessoais':

$string = "UPDATE tabela SET ".$string." Data = GETDATE() WHERE Id = ".$_SESSION['Id'];
echo $string."<br>";

break;

case 'dados-opcional':

break;


}

}
?>

Como eu faço para testar no success se a página processa.php está escrevendo correto a string de acordo com as variáveis passadas e os valores recebidos?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

'testar' o sucess é relativo....

 

Sempre q você receber uma resposta HTTP 200 vai cair no bloco sucess da requisição.... 

success: function( data ){
 //Resposta HTTP 200....
},error: function( data ){
  //Resposta 404, 500 e por ai vai
}

Mais detalhes sobre (Jquery.ajax , $.ajax) :
http://api.jquery.com/jquery.ajax/

 

 

Veja mais sobre respostas HTTP:

https://pt.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Resposta

 

 

Mas se a ideia é testar uma validação server side.

 

Ex:

"Não permitir E-mail duplicado na Base é outra coisa..."

 

Ai é outra coisa....

 

Acho uma boa utilizar JSON nesses casos.

 

Tem um exemplo no meu GitHub, da uma olhada:

https://github.com/gabrieldarezzo/comum/tree/master/exemplo_json_try

 

Ele não foge muito do que foi discutido nesse tópico e está bem a nível de 'exemplo'

 

Espero ter gerado mais esclarecimentos do que duvidas haha

 

 

 

Como eu faço para testar no success se a página processa.php está escrevendo correto a string de acordo com as variáveis passadas e os valores recebidos?

 

Sei lá eu ué haha

Ve seu 'Header' da requisição, se passou certinho via POST, ou se não da um var_dump na pagina

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito