Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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
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();
}if (window.ActiveXObject){
var versions = ["MSXML2.XMLHttp.5.0",];
}
}
for (var i=0; i < versions.length; i++){return new ActiveXObject(versions[i]);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.
é mais ou menos isso hehe estamos quase lá rsrs
este é o exemplo que estou falando
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
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...
dai você coloca, clique em um link... dai ele carrega o formulario com load...
dai quando clicar no 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...
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
-----------------------------
eu baixei esse script mas é muito complexo
deem uma olhada no demo do contact form...
Valeu pela ajuda
Tem um script em ajax que faz isso
Ele está aqui
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>