Ir para conteúdo

Arquivado

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

Gabriel T.

[Resolvido] Pegar dados do input e "echo" na mesma pagina

Recommended Posts

EDIT: Bom, o título é esse:

Pegar dados do input e "echo" na mesma pagina sem refresh após submit.

Não coube lá... rsrs

 

Bom pessoal, primeiramente os desejo uma boa noite.

Estou precisando de uma pequena ajuda...

Tenho um formulário de cadastro, e queria que o usuário checasse os dados incluidos sem dar refresh na página.

Após o usuário incluir todos os dados no formulário de cadastro, o formulário será escondido e aparecerá uma div com todos os dados incluídos no formulário.

Estou tentando fazer isso com PHP e Ajax, mas ainda não estou conseguindo.

Alguém tem alguma sugestão?

Muito obrigado.

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mostre como você tentou fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, eu tentei fazer assim, com um código já criado que utilizo para mandar os dados via POST:

 

js e ajax:

<script type="text/javascript">
$(document).ready(function() {
$("#contato").validate({
//Validação...
rules: {
	captcha2: {
	required: true,
	remote: "captcha2/process.php"
	},
	datadenascimento: {
	required: true,
	minlength: 10
	}
},
messages: {
	captcha2: {
	remote: "<img style=\"margin-right:5px; margin-top: 1px;\" src=\"images/error.gif\"/><em style=\"color:#FF0000; background-color:#fff;\">Código inválido.</em>"
	},
	datadenascimento: {
	minlength: "<img style=\"margin-right:5px; margin-top: 1px;\" src=\"images/error.gif\"/><em style=\"color:#FF0000; background-color:#fff;\">Data de nascimento inválida.</em>"
	}
},	
//fim da validação.

               submitHandler: function(form) {
                       var dados = $("#contato").serialize();
                       $.ajax( {
                               type: "POST",
                               data: "do=cadastrar&"+decodeURIComponent(dados),//eu nao sei oq isso faz... '-'
                               beforeSend: function() {
									$("#contato").slideUp();
                               },
                               success: function() {
									$("#confirmacao").slideDown();
                               },
                               error: function() {
                                       alert('Erro no ajax');
                       }});
                       return false;
               }

       });

});
</script>

 

//começo do form de contato
<form id="contato" name="cadastro" method="post">

 

//o php por onde quero pegar os dados
<?php
			$_POST['nome'] = $nome;
			$_POST['sobrenome'] = $sobrenome;
			$_POST['sexo'] = $sexo;
			$_POST['datadenascimento'] = $datadenascimento;
			$_POST['cidade'] = $cidade;
			$_POST['estado'] = $estado;
			$_POST['email'] = $email;
			$_POST['senha'] = $senhah;
		?>

 

//div escondida onde quando dou submit aparece os dados do form:
<div id="confirmacao" style="display:none">
		<fieldset>
	    	<legend><p>Dados incluídos no formulário</p></legend>
 					<table width="288" border="0" align="center" cellpadding="2" cellspacing="2">
   					<tr>
     						<td><em>Nome Completo</em></td><br />
     						<td><?php echo "<p>$nome $sobrenome</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>Sexo</em></td><br />
     						<td><?php echo "<p>$sexo</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>Data de Nascimento</em></td><br />
     						<td><?php echo "<p>$datadenascimento</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>Cidade</em></td><br />
     						<td><?php echo "<p>$cidade</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>Estado</em></td><br />
     						<td><?php echo "<p>$estado</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>E-mail</em></td><br />
     						<td><?php echo "<p>$email</p>"; ?></td>
   					</tr>
   					<tr>
     						<td><em>Senha</em></td><br />
     						<td><?php echo "<p>$senhah</p>"; ?></td>
   					</tr>
 					</table>
 			</fieldset>
	    </div>

 

foi assim...

mas acho que não tem nada a ver a parte do ajax...

Compartilhar este post


Link para o post
Compartilhar em outros sites

uê..

 

success: function( data ) {
      $("#confirmacao").html( data );

 

pronto, assim qndo o ajax acabar, e voltar com sucesso, será exibido no id="confirmacao", oq você der echo lá no arquivo php.. qual é o arquivo que processa ?

 

http://api.jquery.com/jQuery.ajax/

Compartilhar este post


Link para o post
Compartilhar em outros sites

veja no manual:

$.ajax({
 url: 'ajax/test.html',

você precisa informar no url, o arquivo php que vai processar os dados do formulario (inserir no banco, e fazer o retorno).

 

cara, se você é 'leigo', então estude ^_^

simples assim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah, sim... Entendi.

Me desculpe pela pergunta 'tosca'...

Bom, o arquivo php que vai enviar os dados pra tabela eu ainda vou criar.

Mas assim...

eu ainda não consegui resgatar os dados, com essa função data , da um bug enorme e abre a mesma página na mesma página :mellow:

 

Ah, mas se eu informar a página no ajax ele vai fazer o submit sem o usuário verificar os dados dele incluidos no formulário, não é?

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu ainda não consegui resgatar os dados, com essa função data , da um bug enorme e abre a mesma página na mesma página :mellow:

pq você não informou o URL

 

 

Ah, mas se eu informar a página no ajax ele vai fazer o submit sem o usuário verificar os dados dele incluidos no formulário, não é?

lógico que não.

Uma coisa é uma coisa, e outra coisa é outra coisa.

 

o submit está condicionado a verificação. Só se os dados forem válidos (passarem das regras que você impôs), é que o arquivo php que irá processar (que você vai informar no URL), será chamado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas assim...

Sei que se as regras que eu coloquei forem válidas, o submit será efetuado pelo usuário.

Após o submit, quero que os dados que o usuário incluiu no formulário, aparecesse em uma div escondida, que então nessa div terá outro formulário com um botão SIM e outro NÃO.

Se o usuário clicar no botão SIM, os dados serão incluídos na tabela e aparecerá uma frase de sucesso.

Quero que o arquivo php seja processado após a verificação dos dados que o usuário digitou...

Seria correto eu incluir o ajax para chamar a página php no segundo formulário, onde tem o botão SIM e NÃO, não é?

São muitas dúvidas...

Me desculpe :mellow:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Seria correto eu incluir o ajax para chamar a página php no segundo formulário, onde tem o botão SIM e NÃO, não é?

sim, neste caso sim.

 

Então no submitHandler você não deve enviar um ajax.

mas sim com javascript puro, esconder o formulario, apresentar os dados pro usuário e mostrar o 'SIM' e 'NÃO'.

 

 

Só dai, que você faz o ajax.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok, entendi.

Eu poderia fazer isso:

<script type="text/javascript" language="javascript">
$(function($) {
$("#formulario").submit(function() {
	var nome = $("#nome").val();

Mas como eu incluo o val do campo na div escondida?

Compartilhar este post


Link para o post
Compartilhar em outros sites

nesse caso cara, usa o submitHandle logo. Não precisa de outro evento submit

 

uê.. aí é básico de jQuery cara..

var nome = $("#nome").val();
$("#div_escondida").html( '<p>'+nome+'</p>' );

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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