Publicidade

Entre para seguir isso  
Seguidores 0
Gabriel T.

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

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.

0

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...

0

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/

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

qual é o arquivo que processa ?

 

Como assim o arquivo que processa?

desculpe mas sou leigo em ajax...

0

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.

0

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 é?

0

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.

0

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:

0

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.

0

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?

0

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>' );

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado amigo, deu certo.

Tópico resolvido.

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora
Entre para seguir isso  
Seguidores 0

  • Próximos Eventos