Ir para conteúdo

POWERED BY:

Arquivado

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

fermel

3 paginas na mesma janela modal

Por , em PHP

Recommended Posts

fermel    0

fermel
Postado

Como faço para acessar 3 paginas, obviamente uma após a outra dentro da mesma janela modal?

 

Exemplo:

Pagina 1 - tenho o formulario de cadastro;

Pagina 2 - a confirmação dos dados do formulario;

Pagina 3 - o envio dos dados e a mensagem q foi efetuado com sucesso.

 

O usuario clica no link para fazer o cadastro ai abre a janela modal, ele preenche os dados e clica para confirmar os dados digitados, nessa mesma janela modal eu gostaria q aparecesse o formulario com as informações e caso esteja tudo ok ele clica pra enviar e ai aparece a mensagem de sucesso, tudo na mesma janela modal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel_Moraes    11

Daniel_Moraes
Postado

Tem um script em ajax que faz isso

Ele está aqui 

<script type="text/javascript">
function GetXMLHttp() {  
    if(navigator.appName == "Microsoft Internet Explorer") {  
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } else {  
    xmlHttp = new XMLHttpRequest();  
    }      
    return xmlHttp;  
}  
var xmlRequest = GetXMLHttp();  

function abrirPag(valor){  
var url = valor;  
xmlRequest.open("GET", url, true);  
xmlRequest.onreadystatechange = mudancaEstado;  
xmlRequest.send(null);  
if (xmlRequest.readyState == 1) {  
document.getElementById("conteudo").innerHTML = "Carregando";  
}  
return url;  
}  
function mudancaEstado(){  
if (xmlRequest.readyState == 4){  
document.getElementById("conteudo").innerHTML = xmlRequest.responseText;  
}  
}  
</script>

O link ficara assim: 

<a href="#" onclick="abrirPag('pagina1.html');">Sua pagina 1</a><a href="#" onclick="abrirPag('pagina2.php');">Sua pagina 2</a>

Troque pagina1.html por sua pagina e Sua pagina 1 pelo que vai aparecer no link, faça o mesmo com pagina2

 

Lembrando tem de existir uma div com o id conteudo pois nela que aparecerão os resultado :

<div id="conteudo"> </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

fermel    0

fermel
Postado

ok Daniel_Moraes muito bom o script mas ainda não é isso...

 

vou explicar melhor:

 

tenho uma janela modal que é aberta quando clico em um link. quando essa janela abre eu tenho um formulario de cotação, ao preencher todos os campos eu tenho no final o botão para enviar o formulario....

 

quando clico nesse botão a janela modal fecha e não é isso que eu quero....

 

quando eu clicar no botão eu queria que fosse exibido na mesma janela modal que suma o formulario e apareça uma mensagem informando que a cotação foi enviada com sucesso entende? tipo no mercado livre quando você faz uma compra aparece uma janela modal para voce preencher seu usuario e senha depois aparece outra para escolher a forma de pagamento e apos aparece outra para preencher os dados do cartão.

 

obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel_Moraes    11

Daniel_Moraes
Postado

Então você quer um submit transparente ou seja que envie o formulario sem sair da pagina ?

Se sim sua resposta tambêm é ajax :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
<title>Envio de Formulario</title>
</head>
<body>
<script type="text/javascript">
function generateXMLHttp() {
if (typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}
else{
if (window.ActiveXObject){
var versions = ["MSXML2.XMLHttp.5.0",
"MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
"Microsoft.XMLHttp"
];
}
}
for (var i=0; i < versions.length; i++){
try{
return new ActiveXObject(versions[i]);
}catch(e){}
}
alert('Seu navegador não pode trabalhar com Ajax!');
}
function submit(campo1, campo2){
var xh = generateXMLHttp();
xh.onreadystatechange = function(){
if(xh.readyState == 4 && xh.status == 200){
  document.getElementById("resultado").innerHTML=xh.responseText;
} 
}
xh.open("GET", "suapaginadeenvio.php?campo1="+campo1+"&campo2="+campo2, true);
xh.send(null);
}
</script>
<form name="form">
Campo1 : <input type="text" name="campo1" id="campo1" /><br>
Campo2 : <input type="text" name="campo2" id="campo2" /><br>
<input onclick="submit(document.form.campo1.value,document.form.campo2.value);" type="button" value="Enviar" />
</form>
<div id="resultado">
</div>
</body>
</html>

O metodo de recebimento será GET e você tem de ter um bom conhecimento para alterar o codigo e introduzir ao teu sistema, se não souber fazer isso mande-me uma mensagem no perfil.

Compartilhar este post

Link para o post
Compartilhar em outros sites

fermel    0

fermel
Postado

é mais ou menos isso hehe estamos quase lá rsrs

 

este é o exemplo que estou falando

 

 

Clique aqui

 

ai quando eu clico em enviar ele fecha o modal mas não é isso que eu quero tem que clicar em enviar e ele exibir uma mensagem de confirmação do envio.

 

tem esse exemplo aqui tbm Clique aqui

Compartilhar este post

Link para o post
Compartilhar em outros sites

tiujhou    7

tiujhou
Postado

Não sei se entendi o que você quer... mas vamos lá...

 

Eu utilizo jquery... nesse caso utilize Load ou ($.post/$.get) para carregar a pagina...

http://api.jquery.com/load/

 

dai você coloca, clique em um link... dai ele carrega o formulario com load...

 

dai quando clicar no submit...

 

http://api.jquery.com/submit/

 

Você faz toda a verificação em outra página com "Load"... e se tiver tudo OK você da um echo "Tudo certo"... e chama ele para a Div que estáo formulário...

 

dai uma olhada no que te passei e você irá ver que é muito simples fazer isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

fermel    0

fermel
Postado

Olá tiujhou, não entendi muito bem mas acho que você entendeu o que eu quero dizer hehe

 

teria como colocar um exemplo?

 

o exemplo que eu peguei nos links que voce me passou eu não consegui implementar ficou meio confuso.

 

muito obrigado pela força

 

Olá tiujhou, não entendi muito bem mas acho que você entendeu o que eu quero dizer hehe

 

teria como colocar um exemplo?

 

o exemplo que eu peguei nos links que voce me passou eu não consegui implementar ficou meio confuso.

 

muito obrigado pela força

Veja só... o uso do submit, você deve inserir um ID na tag form( da uma olhada nos links que te passei acima)...

 $("#formulario").submit(function(){	
		$("#conteudo").load("imagem.php", {email: $("input#email").val()});
		return false;
 });

 

Seria assim... quando eu clicar no submit que tenha o form com determinado ID ... ele carrega o arquivo imagem.php e nesse caso especifico eu adicionei o valor do input que tem o ID = email...

 

Suponhamos que temo um input:

 

<div id="box">
   <div id="conteudo">
       <form id="formulario">
       <input type="text" name="email" value="Meu teste" id="email" />
       <input type="submit" value="Enviar" />
   </div>
</div>
</form>

 

então nessa página imagem.php ... para testar se esta dando certo você iria colocar, se existir algum valor no input ele irá mostrar:

 

$pegaEmail = $_POST['email'];
echo $pegaEmail.'Deu certo';

 

Aí que tá, como você quer que ele carregue na mesma página... essa parte $("#conteudo") ...

 

se refere qual id (vai depender do seletor) que ira aparecer dentro... por exemplo:

<div id="box">
   <div id="conteudo">
      Aqui iria mostrar o que você quer que apareça...
   </div>
</div>

 

Não sei se o código está certo, pois não cheguei testar... mais é mais ou menos isso...

Já a questão da janela modal... é uma div com position:absolute ou fixa ...

 

Olá galera, tentei isso que me passaram mas não deu certo ainda

 

nesse link Clique aqui

 

http://www.jacklmoore.com/colorbox/example5/

 

no exemplo Inline HTML

 

é mais ou menos isso ai só que ele trabalha no href eu não consegui fazer ele abrir outra janela modal no submit.

 

o script que eu to usando nesse link que passei Clique aqui é esse

 

$(document).ready(function () {

           //select all the a tag with name equal to modal
           $('a[name=modal]').click(function (e) {
               //Cancel the link behavior
               e.preventDefault();

               //Get the A tag
               var id = $(this).attr('href');

               //Get the screen height and width
               var maskHeight = $(document).height();
               var maskWidth = $(window).width();

               //Set heigth and width to mask to fill up the whole screen
               $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

               //transition effect

               $('#mask').fadeIn(100);
               $('#mask').fadeTo("slow", 0.8);

               //Get the window height and width
               var winH = $(window).height();
               var winW = $(window).width();

               //Set the popup window to center
               $(id).css('top', winH / 2 - $(id).height() / 2);
               $(id).css('left', winW / 2 - $(id).width() / 2);

               //transition effect
               $(id).fadeIn(200);

           });

           //if close button is clicked
           $('.window .close').click(function (e) {
               //Cancel the link behavior
               e.preventDefault();

               $('#mask').hide();
               $('.window').hide();
           });

           //if mask is clicked
           $('#mask').click(function () {
               $(this).hide();
               $('.window').hide();
           });

           $(window).resize(function () {

               var box = $('#boxes .window');

               //Get the screen height and width
               var maskHeight = $(document).height();
               var maskWidth = $(window).width();

               //Set height and width to mask to fill up the whole screen
               $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

               //Get the window height and width
               var winH = $(window).height();
               var winW = $(window).width();

               //Set the popup window to center
               box.css('top', winH / 2 - box.height() / 2);
               box.css('left', winW / 2 - box.width() / 2);

           });

       });

 

------------------

 

caraca ta dificil rsrs

 

desculpe é que eu sou iniciante ainda hehe

 

Galera achei um exemplo do que eu to querendo fazer

 

Clique aqui

 

 

-----------------------------

 

 

eu baixei esse script mas é muito complexo

 

deem uma olhada no demo do contact form...

 

Valeu pela ajuda

Compartilhar este post

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

Informação importante

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

  Aceito