Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom tenho um website com essa estrutura!
<html>
<body>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />
<div class="contact_inputs">
<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />
</form>
</body>
</html>Bom eu gostaria de mandar que tive-se a requisição para 'envio.php'.
Acho que esse é meu codigo em php e funciona!
<?php
if(!empty($_POST)){
$cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";
$mensagem = "Contato via site - Site.com.br\n";
$mensagem.= "Nome: ".$_POST['nome']." \n";
$mensagem.= "Email: ".$_POST['email']." \n";
$mensagem.= "Mensagem:". $_POST['mensagem'];if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
echo "<script type=\"text/javascript\">alert(\"Sua mensagem foi enviada com sucesso.\");history.go(-1);</script>\n";
} echo "<script type=\"text/javascript\">alert(\"Ocorreu um erro ao tentar enviar sua mensagem.\");history.go(-1);</script>\n";
}
}header("Location: contato.html");
}
?>
Agora a questão é, como faço para ao contrario do que está ocorrendo, eu quero que suma o formulário em HTML lá o <form></form> que fiz, e apresenta a mensagem na mesma pagina ‘<h1>Enviado com Sucesso!</h1>’ ‘<h1>Em breve entraremos em contato.</h1>’, como faço isso?Agora a questão é, como faço para ao contrario do que está ocorrendo, eu quero que suma o formulário em HTML lá o <form></form> que fiz, e apresenta a mensagem na mesma pagina ‘<h1>Enviado com Sucesso!</h1>’ ‘<h1>Em breve entraremos em contato.</h1>’, como faço isso?
>
amigo faça isso na página envio.php...
em vez de usar:
echo "<script type=\"text/javascript\">alert(\"Sua mensagem foi enviada com sucesso.\");history.go(-1);</script>\n";user isso:
echo "<h1>Enviado com Sucesso!</h1><br/><h1>Em breve entraremos em contato.</h1>";Não. Ele não quer que a página seja redirecionada. O que você precisa fazer, é usar jQuery, AJAX. Um exemplo básico seria:
AJAX.js
$.ajax({
dataType: 'json',
data: $('#seuForm').serialize(),
type: 'post',
cache: false,
url: 'arquivo.php',
beforeSubmit: function(){
// faz aqui o tratamento de campos vazios
},
success: function(data){
var object = $.parseJSON(data);
if(object.success){
$('.form').hide();
$('.message').html(object.message);
}
},
error: function(data){
$('.form').show();
var object = $.parseJSON(data);
alert(object.message);
}arquivo.php
<?php
$cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";
$mensagem = "Contato via site - Site.com.br\n";
$mensagem.= "Nome: ".$_POST['nome']." \n";
$mensagem.= "Email: ".$_POST['email']." \n";
$mensagem.= "Mensagem:". $_POST['mensagem'];
if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
$data['message'] = 'Enviado com sucesso. Em breve entraremos em contato!';
$data['suucess'] = true;
}
else{
$data['message'] = 'Ocorreu um erro ao tentar enviar sua mensagem';
$data['suucess'] = false;
}
echo json_encode($data);
?>index.html
<html>
<body>
<div class="message"></div>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />
<div class="contact_inputs">
<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />
</form>
</body>
</html>>
Não. Ele não quer que a página seja redirecionada. O que você precisa fazer, é usar jQuery, AJAX. Um exemplo básico seria:
AJAX.js
$.ajax({
dataType: 'json',
data: $('#seuForm').serialize(),
type: 'post',
cache: false,
url: 'arquivo.php',
beforeSubmit: function(){
// faz aqui o tratamento de campos vazios
},
success: function(data){
var object = $.parseJSON(data);
if(object.success){
$('.form').hide();
$('.message').html(object.message);
}
},
error: function(data){
$('.form').show();
var object = $.parseJSON(data);
alert(object.message);
}arquivo.php
<?php
$cab = "From: ".$_POST['nome']." <".$_POST['email'].">\n";
$mensagem = "Contato via site - Site.com.br\n";
$mensagem.= "Nome: ".$_POST['nome']." \n";
$mensagem.= "Email: ".$_POST['email']." \n";
$mensagem.= "Mensagem:". $_POST['mensagem'];
if(mail("Contato@site.com.br", "Formulário de Contato - site.com.br", $mensagem,$cab)){
$data['message'] = 'Enviado com sucesso. Em breve entraremos em contato!';
$data['suucess'] = true;
}
else{
$data['message'] = 'Ocorreu um erro ao tentar enviar sua mensagem';
$data['suucess'] = false;
}
echo json_encode($data);
?>index.html
<html>
<body>
<div class="message"></div>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />
<div class="contact_inputs">
<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />
</form>
</body>
</html>Você pode me ensinar como faço esse tipo de tratamento?
Amigo, acabei de lhe mostrar/ensinar no post #3
>
Amigo, acabei de lhe mostrar/ensinar no post #3
Hehe tentei, mas não funcionou 'kkkkkk' =P
você está utilizando a biblioteca jQuery?...
você precisa chamar a biblioteca em sua página.
tente usar esse link:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
ou mais simples eh isso
<?php
if($_POST['txt']){//aqui seu script de enviar
echo "mensagem";
}
?>
<form method=post >Ainda não consegui!
A pagina INDEX é!
<!DOCTYPE html>
<html class="ie ie6" lang="en">
<html class="ie ie7" lang="en">
<html class="ie ie8" lang="en">
<html lang="en">
<head>
<!-- Basico de pagina
================================================== -->
<meta charset="utf-8" />
<title>SiteTitle.com.br</title>
<meta name="description" content="" />
<meta name="keywords" content="Site,design, desenho, projeto" />
<meta name="author" content="Sandmann" /><!-- Suporte para Mobile
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/fonts/stylesheet.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="" id="css_skin" />
<link rel="stylesheet" href="css/content_css.css" id="css_skin" />
<link rel="stylesheet" href="" id="css_color" />
<link rel="stylesheet" href="css/patterns/lines1.css" id="css_pattern">
<link rel="stylesheet" href="css/layout/layout_background.css" id="css_layout">
<link rel="stylesheet" href="css/skeleton.css" />
<link rel="stylesheet" href="css/plugins/camera.css" />
<link rel="stylesheet" href="css/plugins/elastislide.css" />
<link rel="stylesheet" href="css/plugins/prettyPhoto.css" />
<link rel="stylesheet" href="css/plugins/supersized.css" />
<link rel="stylesheet" href="css/plugins/supersized.shutter.css" />
<link rel="stylesheet" href="css/color_panel.css" /><!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<link rel="stylesheet" href="css/ie_fix.css"><!-- JS
================================================== -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type='text/javascript' src='js/camera.min.js'></script>
<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='js/prettify.js'></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script><!-- Inicio da Galeria
=================== -->
<script type='text/javascript' src='js/supersized.3.2.7.js'></script>
<script type='text/javascript' src='js/supersized.shutter.js'></script>
<!-- AJAX -->
<script src="AJAX.js"></script>
<!-- Final da Galeria
================= -->
<script type="text/javascript" src="js/apng-canvas.min.js"></script>
<script type="text/javascript">
APNG.ifNeeded(function() {
$("img.apng").each(function() { APNG.animateImage(this); });
}).fail(function(message) {
/*Mensagem de falha*/
});
$(document).ready(function(){
});
</script><!-- color_panel
================= -->
<!--
<script type="text/javascript" src="js/color_panel.js"></script>
<script type="text/javascript" src="js/color_panel_inc.js"></script><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/ie_fix.js"></script>
<script type="text/javascript" src="js/respond.src.js"></script>
<script type='text/javascript' src='js/fw_ui.js'></script>
<script type='text/javascript' src='js/scripts.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body id="no_layout">
<header>
<a href="index.html" class="logo">
<span class="logo_ico"></span>
<span>Titulo</span>
<span class="slogan">Slogan. <span>com.br</span></span>
</a>
<div class="head_contact">
<ul>
<li class="top_phone">ligue-me agora <span>+055 11 '9' 0000 0000</span></li>
<li><a href="http://facebook.com.br/titulo" target="_blank" class="social_facebook"></a></li>
<li><a href="http://twitter.com/titulo" target="_blank" class="social_twitter"></a></li>
</ul>
</div>
<div class="head_menu">
<ul class="menu">
<li><a href="index.html">home</a>
</li>
<li><a href="pagina2.html">pagina2</a>
</li>
</ul>
<div class="head_search">
<form name="head_search" method="post" action="" />
<input type="submit" name="submit" id="submit" value="l" />
<input type="text" name="search_field" id="search_field" title="Pesquisa" value="Pesquisa" />
</form>
</div>
<div class="responsive_menu">
menu <span class="pm">+</span>
</div>
</div>
</header>
<div class="responsive-menu-wrapper">
<div class="responsive-menu-items"></div>
</div><!-- Contexto
============= -->
<!-- COPYRIGHT -->
<footer>
<div class="bg_footer">
<div class="copyright">© 2012. Titulo. todos os direitos reservados.</div>
<div class="subscribe"><a href="#"> <span>Login</span></a></div>
<div class="subscribe"><a href="#"> <span>Registra-se</span></a></div>
<ul class="social_share">
<li><a href="http://twitter.com/titulo" target="_blank" class="twitter_share">t</a></li>
<li><a href="http://facebook.com.br/tituo" target="_blank" class="facebook_share">f</a></li>
<li class="share_txt">compartilhar em</li>
</ul>
<a href="#" class="footer_toggler"></a> </div>
<!-- Galeria Superaberta
======================== -->
<div class="supersized">
<div id="gallery_buttons">
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<a id="pauseplay" href="javascript:void(0)"></a>
<a id="hide_gallery" href="javascript:void(0)"></a>
<div class="sep_vertical"></div>
<div class="sep_horizontal"></div>
</div>
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<div id="btn_show"><a class="btn_show"></a></div>
<div id="slidecaption"></div>
</div>
<div class="subfooter">
<div class="subfooter_content container">
<div class="columns four">
<div class="widget_block">
<script type="text/javascript" src="js/jflickrfeed.js"></script></li>
</ul>
</div>
</div>
<div class="columns four">
<script type="text/javascript" src="js/jflickrfeed.js"></script>
<div class="widget_block">
</div>
</div>..........................................................................................................................................................Esse é o form...............................................................
<div class="columns eight">
<h5>Envie uma mensagem</h5>
<div class="message"></div>
<form name="formulario" method="post" action="envio.php" id="contact" class="form" />
<div class="contact_inputs">
<input type="text" name="nome" class="field-name" id="nome" title="Nome *" value="Nome *" />
<input type="text" name="email" class="field-email" id="email" title="Email *" value="Email *" maxlength="250" />
</div>
<textarea name="mensagem" class="field-message" id="textarea" cols="45" rows="5" title="Mensagem *">Mensagem *</textarea>
<input type="reset" name="reset" id="reset" value="" />
<input type="submit" name="submit" class="feedback_go" id="submit" value="" />
</form>
</div>
...................................................................................................................
...................................................................................................................
</footer>
<img src="images/progress.png" class="load_wraper apng" alt="" />
<script type="text/javascript"> {image : 'images/bg_slider/fullscreen_slider1.jpg', title : '<span>EUREKA!</span> A mente que se abre a uma nova idéia jamais voltará ao seu tamanho original. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},
{image : 'images/bg_slider/fullscreen_slider2.jpg', title : '<span>"IMAGINAÇÃO"</span> A imaginação é mais importante que o conhecimento. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},
{image : 'images/bg_slider/fullscreen_slider3.jpg', title : '<span>O VALOR</span> Não tentes ser bem sucedido, tenta antes ser um homem de valor. - Albert Einstein', thumb : 'images/bg_slider/spacer.gif', url : ''},
{image : 'images/bg_slider/fullscreen_slider4.jpg', title : '<span>Pensar</span> O sábio nunca diz tudo o que pensa, mas pensa sempre tudo o que diz. - Aristóteles', thumb : 'images/bg_slider/spacer.gif', url : ''},
];
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Stops slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 8000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 2, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_landscape : 0, // Landscape images will not exceed browser width
fit_portrait : 1, // Portrait images will not exceed browser height
min_width : 100, // Min width allowed (in pixels)
min_height : 100, // Min height allowed (in pixels)
horizontal_center : 0, // Horizontally center background
vertical_center : 0, // Vertically center background
// Components
slide_links : 0, // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : galleryDef
});
});
</script>
</body>
</html>
amigo faça isso na página envio.php...
em vez de usar:
user isso: