Adicionar redirect em formulario JS/PHP

[dennyworks 0]

olá a todos,

 

Tenho um formulario de contato com as seguintes dependências:

 

CONTATO.HTML

<div id="form">
<div class="thx">Obrigado! <br /> Em breve entraremos em contato com você.</div>

	<fieldset>
		<input type="text" id="name" title="Nome" />
			<div class="error name-error">Este campo é Requerido!</div>
		</fieldset>	
		<fieldset>
			<input type="text" id="email" title="E-Mail" />
				<div class="error email-error">Este campo é Requerido!</div>
		</fieldset>	
		<fieldset>
			<input type="text" id="phonenumber" title="Telefone" />
		</fieldset>	
		<fieldset>
			<textarea id="message" title="Your Message" rows="4" cols="10"></textarea>
				<div class="error message-error">Este campo é Requerido!</div>
		</fieldset>	
		<button class="submit">Enviar</button>

</div><!--end form-->

MARKUP.JS

$(document).ready(function(){

// contact form handling

$('.submit').click(function(){

	var name = $('#name').val();
	var email = $('#email').val();
	var phone = $('#phonenumber').val();
	var message = $('#message').val();
	var valid = true;

	if (name == '' || name == $('#name').attr('title')) {
		$('.name-error').show();
		valid = false;
	}

	if (email == '' || email == $('#email').attr('title')) {
		$('.email-error').show();
		valid = false;
	}

	if (message == '' || message == $('#message').attr('title')) {
		$('.message-error').show();
		valid = false;
	}

	// send data with ajax

	var formData = 'name='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;

	if (valid == true) {		
		$.ajax({
			type : 'POST',
			url : 'lib/send.php',
			data : formData,
			success : function () {
				$('.error').hide();
				$('#name').val('');
				$('#email').val('');
				$('#phonenumber').val('');
				$('#message').val('');
				$('.thx').show();
			}
		});
	} // valid


	return false;

});

});

 

SEND.PHP

<?php
require_once('class.phpmailer-lite.php');

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {

// check if everything filled in
if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {

	$from = $_POST['email'];
	$subject = 'Request from contact form';
	$body = $_POST['message'];

	$mail = new PHPMailerLite(); 
	$mail->IsMail(); 

	$body = $_POST['message'];
	$body = eregi_replace("[\]",'',$body);

	if ($_POST['phone'] != '') {

		$body = $body.'<br/><br/> Phone: '.$_POST['phone'];
	}



	$mail->SetFrom($_POST['email'], $_POST['name']);

	$address = "contato@riecabeleireiros.com.br";	
	$mail->AddAddress($address, "R&E Cabeleireiros");
	$mail->Subject = "Formulario de contato do Site";

	$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; 

	$mail->MsgHTML($body);


	if(!$mail->Send()) {
	  echo "Mailer Error: " . $mail->ErrorInfo;
	} else {
	  echo "Message sent!";
	}

} // everything ok


} // requested via ajax

?>

 

E a grande biblioteca PHPMailer Lite

 

A minha dificuldade é "como faço para adicionar um comando para quando o cliente clicar em enviar, alem de aparecer a mensagem que o ajax carrega no formulario:

 

<div class="thx">Obrigado! <br /> Em breve entraremos em contato com você.</div>

ele redirecione o cliente para uma pagina de confirmação?

 

A intenção de redirecionar para uma pagina de confirmação é para inserir nela o código de acompanhamento de conversões do google adwords, para acompanhar os resultados das campanhas.

 

Espero que tenham entendido, e seria de muita ajuda do iMasters esta resposta.

 

Grato

Sem mais

Denis Almeida

[Evandro Oliveira 331]

se quiser redirecionar após o visitante clicar, utilize o método click(). Se quiser após um tempo determinado, pode adicionar como callback de fadeOut() ou hide()

 

var div = $('.thx');

A div que exibe a mensagem.

 

function abrepg(){
   window.href.location = 'outrapagina.html';
}

Função que abre a nova página

 

Amarrando ao clique:

div.click(abrepg);

 

Amarrando a um intervalo:

div.fadeOut('slow',abrepg);

 

Obviamente você não precisa de uma função a parte para isso, pode ser passada diretamente como callback:

$('.thx').fadeOut('slow',function(){ window.href.location = 'outrapagina.html'; });

[dennyworks 0]

Amigo primeiro obrigado e descupa a ignorância, mas em "markup.js" inseri sua sugestão:

 

$('.thx').fadeOut('slow',function(){ window.href.location = 'obrigado.html'; });

 

ficando assim:

 

MARKUP.JS

$(document).ready(function(){

       // contact form handling

       $('.submit').click(function(){

               var name = $('#name').val();
               var email = $('#email').val();
               var phone = $('#phonenumber').val();
               var message = $('#message').val();
               var valid = true;

               if (name == '' || name == $('#name').attr('title')) {
                       $('.name-error').show();
                       valid = false;
               }

               if (email == '' || email == $('#email').attr('title')) {
                       $('.email-error').show();
                       valid = false;
               }

               if (message == '' || message == $('#message').attr('title')) {
                       $('.message-error').show();
                       valid = false;
               }

               // send data with ajax

               var formData = 'name='+ name + '&email=' + email + '&phone=' + phone + '&message=' + message;

               if (valid == true) {            
                       $.ajax({
                               type : 'POST',
                               url : 'lib/send.php',
                               data : formData,
                               success : function () {
                                       $('.error').hide();
                                       $('#name').val('');
                                       $('#email').val('');
                                       $('#phonenumber').val('');
                                       $('#message').val('');
                                       $('.thx').fadeOut('slow',function(){ window.href.location = 'obrigado.html'; });
                               }
                       });
               } // valid


               return false;

       });

});

 

Talvez esteja mal, mas não funcionou =(, ele envia mas não chama obrigado.html

 

obrigado!

[William Bruno 1501]

a ordem está errada, troque por:

 

window.location.href

[Evandro Oliveira 331]

a ordem está errada, troque por:

 

window.location.href

 

Exato!

Nada como fazer um post às 11 da noite :D