Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Página de resposta do envio do formulário em div jQuery

03-04-2015 21:28

Há um tempo atras eu postei um link mostrando como enviar os dados de um formulário sem refresh da página, usando jQuery.
Enviando-dados-via-POST-ou-GET-com-jQuery_3_2830.html

Agora vou mostrar uma melhoria que fiz nesse script, que é a de mostrar uma div centralizada com a página do envio dos dados do formulário.

Após submeter os dados via jQuery é mostrada uma div no centro da tela com as informações da página resposta.
A div também possui um link que ao ser clicado esconde a div.

Abaixo os códigos da página do formulário.

jQuery

<script src="jquery.js"></script>   <script language="javascript" type="text/javascript"> // evitando que os dados sejam submetidos pelo modo tradicional jQuery(document).ready(function(){ jQuery("#form").submit(function(){ return false; });   // carregando a função para o envio jQuery("#envia").click(function(){ envia_form(); });   // limpando a div antes de um novo envio function envia_form() { jQuery("#retorno").empty();   // pegando os campos do formulário var nome = jQuery("#nome").val(); var senha = jQuery("#senha").val();   // tipo dos dados, url do documento, tipo de dados, campos enviados // para GET mude o type para GET jQuery.ajax({ type: "POST", url: "resposta.php", dataType: "html", data: "nome=" + nome + "&senha=" + senha,   // enviado com sucesso success: function(response){   $('#retorno').show(); jQuery("#retorno").append(response);   }, // quando houver erro error: function(){ alert("Ocorreu um erro durante a requisição"); } });   } }); </script>

CSS

<style> #retorno{ width: 200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:#ccc; } </style>

HTML

<div id="retorno" style="display:none;"></div>   <form id="form" action="" method="POST"> nome: <input type="text" id="nome" name="nome" value=""> <br> senha: <input type="password" id="senha" name="senha" value=""> <br> <button id="envia" type="submit">Enviar</button> </form>

resposta.php "definida no script jQuery para retornar os dados do envio"

<?php echo $_POST['nome']."<br>"; echo $_POST['senha']."<br>"; ?>


<a href="javascript://" onclick="$('#retorno').hide()">Fechar</a>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado