Ir para o conteúdo

Publicidade

 Estatísticas do Fórum

  • 0 Usuários ativos

    0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

Foto:

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

  • Por favor, faça o login para responder
12 respostas neste tópico

#1 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 18:16

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

#2 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 18:31

mostre como você tentou fazer.
  • 0

#3 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 18:36

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['---o'] = $---o;
				$_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>---o</em></td><br />
      						<td><?php echo "<p>$---o</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

#4 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 18:53

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

#5 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 19:00

qual é o arquivo que processa ?


Como assim o arquivo que processa?
desculpe mas sou leigo em ajax...
  • 0

#6 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 19:06

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

#7 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 19:11

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

#8 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 19:23

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

#9 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 19:32

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

#10 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 19:41

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

#11 mokololo

mokololo
  • Membros
  • 155 posts

Postado 04 janeiro 2011 - 19:48

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

#12 William Bruno

William Bruno

    Desenvolvedor FrontEnd

  • Moderadores Globais
  • 23.951 posts

Postado 04 janeiro 2011 - 19:51

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

#13 mokololo

mokololo
  • Membros
  • 155 posts

Postado 07 janeiro 2011 - 16:50

Obrigado amigo, deu certo.
Tópico resolvido.
  • 0




Publicidade

/ins>