Trouble with the mail script

iiccyeye

Hi guys, i was working with a web template that i got from the internet, and i got the mail files with the template.

I have been tweaking it a little but i cant get it to work, it wont send anything and it doesnt want to reset the errors.

I would appriciate it if anyone would be able to help me figure this out, is there something i have missed?

This is the layout of my map ( (F) = folder ):

(F)Bin: contains: mailHandler.php and mailHandler.ashx
(F)CSS
(F)images
(F)js: contains: contact-form.js & other .js files
contact.html
index.html
...
...

And i will post my code for mailHandler.php, mailHandler.ashx, contact-form.js and my contact.html files.

contacts.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<title>Flyttis</title>
		<meta content="text/html; charset=utf-8">
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
		<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">    

		<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/cufon-replace.js" type="text/javascript"></script>
		<script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
		<script src="js/NewsGoth_700.font.js" type="text/javascript"></script>
		<script src="js/Vegur_300.font.js" type="text/javascript"></script> 
		<script src="js/FF-cash.js" type="text/javascript"></script>
        <script src="../js/contact-form.js"></script>   

		<script type="text/javascript" src="js/jquery.googlemaps1.01.js"></script>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=en&amp;sensor=true&amp;key=ABQIAAAAWCGzSMrk7YDL2KSdECDFthRCU6CW1wRB4NQsX5PSi053h5zzZhQIZ5ivn4VAQx53xyYuNrvkOmgO1w" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
			   $('#map_canvas').googleMaps({
				  latitude: 59.238772,
				  longitude: 17.845175,
						markers: {
						latitude: 	59.238772,
						longitude: 17.845175,
					}
			   });
			});
		</script>

</head>
<body id="page5">
<!--==============================header=================================-->
		<header>
			<div class="main">
				<div class="wrapper">
					<h1>
					<a href="index.html">DesignStudio</a></h1>
			  <nav>
						<ul class="menu">
							<li><a href="index.html">Hem</a></li>
							<li><a href="services.html">Services</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li><a href="privacy.html">Privacy</a></li>
							<li><a class="active" href="contacts.html">Kontakta oss</a></li>
						</ul>
					</nav>
				</div>
			</div><div class="ic">More Website Templates @ TemplateMonster.com - October 31, 2011!</div>
		</header>
<!--==============================content================================-->
		<section id="content">
			<div class="main">
				<div class="indent-left">
					<div class="wrapper">
						<article class="col-1">
							<h3>Vår adress</h3>
							<div class="p1">
								<figure class="img-border">
									<div id="map_canvas"></div>
								</figure>
								<div class="clear"></div>
							</div>
							<dl>
								<dt>8901 Marmora Road,<br>Glasgow, D04 89GR.</dt>
								<dd><span>Freephone:</span>  +1 800 559 6580</dd>
								<dd><span>Telephone:</span>  +1 800 603 6035</dd>
								<dd><span>FAX:</span>  +1 800 889 9898</dd>
								<dd><span>E-mail:</span> <a class="link-2" href="#">mail@demolink.org</a></dd>
							</dl>
						</article>
						<article class="col-2">
							<h3>Kontakta oss</h3>                     

							<div id="contact_wrapper"><form id="contact_form">
                             <input name="owner_email" id="owner_email" value="xxxxxxxx@hotmail.com" type="hidden" />
                       		 <input name="serverProcessorType" id="serverProcessorType" value="php" type="hidden" />
                       		 <input name="smtpMailServer" id="smtpMailServer" value="smtp.bredband.net" type="hidden" />
                       		 <input name="stripHTML" id="stripHTML" value="true" type="hidden" />      

								<fieldset>
									<label>     

										<div class="clearfix">
                                        <input name="name" value="Namn" id="name"  onFocus="if(this.value=='Namn') {this.value=''}"  onBlur="if(this.value=='') {this.value='Namn'}" type="text" />
                                        <label class="error" for="name" id="name_error">*Detta fält är obligatoriskt.</label>
                                        <label class="error" for="name" id="name_error2">*Ogiltigt namn.</label>
                                        <div class="clear2"></div>
										</div>
									</label>
									<label>
                                    <div class="clearfix">
									  <input name="email "value="Email" id="email" onFocus="if(this.value=='Email') {this.value=''}"  onBlur="if(this.value=='') {this.value='Email'}" type="email" />
                                      <label class="error" for="email" id="email_error">*Detta fält är obligatoriskt.</label>
                                      <label class="error" for="email" id="email_error2">*Ogiltig email.</label>
                                      <div class="clear2"></div>
										</div>
									</label>
									<label>
									<div class="clearfix">
                                     <input  name="phone" value="Telefon" id="phone" onFocus="if(this.value=='Telefon') {this.value=''}" onBlur="if(this.value=='')
                                     {this.value='Telefon'}" type="tel" />
                                      <label class="error" for="phone" id="phone_error">*Detta fält är obligatoriskt.</label>
                                      <label class="error" for="phone" id="phone_error2">*Ogiltig telefon nummer.</label>
                                      <div class="clear2"></div>
										</div>
									</label>
                                    <div class="clearfix">
									<textarea name="message" id="message"  onFocus="if(this.value=='Meddelande') {this.value=''}" onBlur="if(this.value=='') {this.value='Meddelande'}" >Meddelande</textarea>
                                    <div class="clear2"></div>
										</div>
									<div class="buttons-wrapper">

									<a href="#" onClick="document.getElementById('contact_form').reset()" class="button"  >Rensa</a>
									<a href="#" onClick="document.getElementById('contact_form').submit()" class="button"  >Skicka</a>
                                    </div>
							</fieldset>
						</form></div>
                        </div>
				  </article>
				</div>
			</div>
		</div>
	</section>
<!--==============================footer=================================-->
		<footer>
			<div class="main">
				<div class="wrapper border-bot2 margin-bot">
					<article class="fcol-1">
						<div class="indent-left">
							<h3 class="color-1">Stay Connected</h3>
							<ul class="list-services">
								<li><a href="#">Facebook</a></li>
								<li><a class="it-2" href="#">Twitter</a></li>
								<li><a class="it-3" href="#">Linked In</a></li>
								<li class="last-item"><a class="it-4" href="#">Del.ico.us</a></li>
							</ul>
						</div>
					</article>
					<article class="fcol-2">
						<h3 class="color-1">Strategy Solution</h3>
						<p class="p3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit velit esse.</p>
						<a class="button2" href="#">Read More</a>
					</article>
					<article class="fcol-3">
						<h3 class="color-1">Links</h3>
						<ul class="list-3">
							<li><a href="#">Flash Resources</a> <span> - Lorem ipsum dolor</span></li>
							<li><a href="#">CSS &amp; Coding Tutorials</a> <span> - Excepteur sint</span></li>
							<li><a href="#">Free Clipart for Design</a> <span> - Duis autre dolor</span></li>
							<li class="last-item"><a href="#">Design Education</a> <span> - Neque quisquam</span></li>
						</ul>
					</article>
				</div>
				<div class="aligncenter">
					Design Studio &copy; 2011 <a rel="nofollow" class="color-1" href="http://www.templatemonster.com/" target="_blank">Website Template</a> by TemplateMonster.com
				</div>
			</div>
		</footer>
		<script type="text/javascript"> Cufon.now(); </script>
	</body>
</html>

MailHandler.php

<?php
	$owner_email = $_POST["owner_email"];
	$headers = 'From:' . $_POST["email"];
	$subject = 'A message from your site visitor ' . $_POST["name"];
	$messageBody = "";

$messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
$messageBody .= '<p>Email Address: ' . $_POST['email'] . '</p>' . "\n";
$messageBody .= '<br>' . "\n";
if($_POST['state']!='nope'){		
	$messageBody .= '<p>State: ' . $_POST['state'] . '</p>' . "\n";
	$messageBody .= '<br>' . "\n";
}
if($_POST['phone']!='nope'){		
	$messageBody .= '<p>Phone Number: ' . $_POST['phone'] . '</p>' . "\n";
	$messageBody .= '<br>' . "\n";
}	
if($_POST['fax']!='nope'){		
	$messageBody .= '<p>Fax Number: ' . $_POST['fax'] . '</p>' . "\n";
	$messageBody .= '<br>' . "\n";
}
$messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";

if($_POST["stripHTML"] == 'true'){
	$messageBody = strip_tags($messageBody);
}

try{
	if(!mail($owner_email, $subject, $messageBody, $headers)){
		throw new Exception('mail failed');
	}else{
		echo 'mail sent';
	}
}catch(Exception $e){
	echo $e->getMessage() ."\n";
}
?>

iiccyeye

Sorry for the delay, it said that my post would be validated, anyway this is the files that i have.

MailHandler.ashx

<%@ WebHandler Language="C#" Class="Handler" Debug="true" %>

using System;
using System.Web;
using System.Net.Mail;
using System.Text.RegularExpressions;

public class Handler : IHttpHandler {
	public void ProcessRequest (HttpContext context) {
		SmtpClient mailClient = new SmtpClient(context.Request.Form.Get("smtpMailServer"));
		string owner_email = context.Request.Form.Get("owner_email");
		string subject = "A message from your site visitor " + context.Request.Form.Get("name");
		string email = context.Request.Form.Get("email");
		string messageBody = "";

	messageBody += "<p>Visitor: " + context.Request.Form.Get("name") + "</p>\n";
	messageBody += "<br>\n";
	messageBody += "<p>Email Address: " + context.Request.Form.Get("email") + "</p>\n";
	messageBody += "<br>\n";
	messageBody += "<p>Phone Number: " + context.Request.Form.Get("phone") + "</p>\n";
	messageBody += "<br>\n";
	messageBody += "<p>Message: " + context.Request.Form.Get("message") + "</p>\n";


	MailMessage message = new MailMessage();

	try{
		message.From = new MailAddress(email.ToString());
	}catch (FormatException e) {
		context.Response.Write(e.Message);
	}

	message.To.Add(owner_email);
	message.Subject = subject;
	if(context.Request.Form.Get("stripHTML") == "true"){
		message.IsBodyHtml = false;
        messageBody = Regex.Replace(messageBody, "<.*?>", string.Empty);
	}else{
	  	message.IsBodyHtml = true;
	}
	message.Body = messageBody;

	try{
		mailClient.Send(message);
	}catch (SmtpException e) {
		context.Response.Write("mail failed");
	}
	context.Response.Write("mail sent");
}

public bool IsReusable {
	get	{
		return false;
	}
}
}

contact-form.js

contactInit = function(){
	$('.error').hide();

// reset form and hide all errors
$("a#clear").click(function(){
	$('.error').hide();
	$('form#contact_form').clearForm();
	return false;
});

// show message error if after editing
// the name field contains improper value
$("input#name").blur(function(){
	if(validateInput('name')){
		if(!validateName()){
			$("label#name_error").hide();
			$("label#name_error2").show();
		}
	}else{
		$("label#name_error2").hide();
	}
});

// show message error if after editing
// the email field contains improper value
$("input#email").blur(function(){
	if(validateInput('email')){
		if(!validateEmail()){
			$("label#email_error").hide();
			$("label#email_error2").show();
		}
	}else{
		$("label#email_error2").hide();
	}
});

// show message error if after editing
// the phone field contains improper value
$("input#phone").blur(function(){
	if(validateInput('phone')){
		if(!validatePhone()){
			$("label#phone_error").hide();
			$("label#phone_error2").show();
		}
	}else{
		$("label#phone_error2").hide();
	}
});

// show message error if after editing
// the message field contains improper value
$("textarea#message").blur(function(){
	if(validateTextArea('message')){
		if(!validateMessage()){
			$("label#message_error").hide();
			$("label#message_error2").show();
		}
	}else{
		$("label#message_error2").hide();
	}
});

$("input#name").keydown(function(){
	if(validateInput('name')){
		$("label#name_error").hide();
	}
	if(validateName()){
		$("label#name_error2").hide();
	}
});

$("input#email").keydown(function(){
	if(validateInput('email')){
		$("label#email_error").hide();
	}
	if(validateEmail()){
		$("label#email_error2").hide();
	}
});

$("input#phone").keydown(function(){
	if(validateInput('phone')){
		$("label#phone_error").hide();
	}
	if(validatePhone()){
		$("label#phone_error2").hide();
	}
});

$("textarea#message").keydown(function(){
	if(validateTextArea('message')){
		$("label#message_error").hide();
	}
	if(validateMessage()){
		$("label#message_error2").hide();
	}
});

var owner_email = $("input#owner_email").val();
if(!isValidEmailAddress(owner_email)){
	$('#contact_wrapper').html("<label class='error'>*Ägar email är ogiltig</label>")
}

$("a#submit").click(function(){
	// validate and process form
	var quit = false;
	if(validateName()){
		name = validateName();
		$("label#name_error").hide();
		$("label#name_error2").hide();
	}else if(validateInput('name')){
		$("label#name_error").hide();
		$("label#name_error2").show();
	}else{
		$("label#name_error").show();
		$("label#name_error2").hide();
		quit = true;
	}
	if(validateEmail()){
		email = validateEmail();
		$("label#email_error").hide();
		$("label#email_error2").hide();
	}else if(validateInput('email')){
		$("label#email_error").hide();
		$("label#email_error2").show();
	}else{
		$("label#email_error").show();
		$("label#email_error2").hide();
		quit = true;
	}
	if(validatePhone()){
		phone = validatePhone();
		$("label#phone_error").hide();
		$("label#phone_error2").hide();
	}else if(validateInput('phone')){
		$("label#phone_error").hide();
		$("label#phone_error2").show();
	}else{
		$("label#phone_error").show();
		$("label#phone_error2").hide();
		quit = true;
	}
	if(validateMessage()){
		message = validateMessage();
		$("label#message_error").hide();
		$("label#message_error2").hide();
	}else if(validateTextArea('message')){
		$("label#message_error").hide();
		$("label#message_error2").show();
	}else{
		$("label#message_error").show();
		$("label#message_error2").hide();
		quit = true;
	}
	if(quit){
		return false;
	}

	var stripHTML = $("input#stripHTML").val();
	var smtpMailServer = $("input#smtpMailServer").val();

	var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&message=' + message + '&owner_email=' + owner_email + '&stripHTML=' + stripHTML + '&smtpMailServer=' + smtpMailServer;

	var serverProcessorType = $("input#serverProcessorType").val();
	if(serverProcessorType == 'asp'){
		fileExtension = 'php';
	}else{
		fileExtension = serverProcessorType;
	}
	var mailHandlerURL = "../bin/MailHandler." + fileExtension;
	$.ajax({
		type: "POST",
		url: mailHandlerURL,
		data: dataString,
		success: function(){
			$('.error').hide();
			$('form#contact_form').clearForm();
			$('#contact_wrapper').html("<div class='download-box'>Meddelandet har skickats!</div>")
				.append("<br><label for='message'><b>Vi kommer att kontakta dig så snabbt som möjligt.</b></label>")
				.hide()
				.fadeIn(1500, function(){
					$('#contact_wrapper').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>Tillbaka</a>");
				});
		}
	});

	return false;
});


$.fn.clearForm = function(){
return this.each(function(){
	var type = this.type, tag = this.tagName.toLowerCase();
	if (tag == 'form'){
		return $(':input',this).clearForm();
	}
	if (type == 'text' || type == 'password' || tag == 'textarea'){
		this.value = '';
	}else if (type == 'checkbox' || type == 'radio'){
		this.checked = false;
	}else if (tag == 'select'){
		this.selectedIndex = -1;
	}
});
};
function isValidName(name){
	var pattern = new RegExp(/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/);

return pattern.test(name);
}
function isValidEmailAddress(emailAddress){
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

return pattern.test(emailAddress);
}

function isValidPhoneNumber(phoneNumber){
	var pattern = new RegExp(/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/);

return pattern.test(phoneNumber);
}

function validateName(){
	var name = $("input#name").val();
	if(isValidName(name)){
		return name;
	}else{
		return false;
	}
}

function validateEmail(){
	var email = $("input#email").val();
	if(!isValidEmailAddress(email)){
		return false;
	}else{
		return email;
	}
}

function validatePhone(){
	var phone = $("input#phone").val();
	if(!isValidPhoneNumber(phone)){
		return false;
	}else{
		return phone;
	}
}

function validateMessage(){
	var message = $("textarea#message").val();
	if(message.length < 10){
		return false;
	}else{
		return message;
	}
}

// make sure visitor does not input a blank field
function validateInput(field){
	var fieldObject = $("input#" + field + "").val();
	if(fieldObject.length < 1){
		return false;
	}else{
		return true;
	}
}

function validateTextArea(field){
	var fieldObject = $("textarea#" + field + "").val();
	if(fieldObject.length < 1){
		return false;
	}else{
		return true;
	}
}


};

iiccyeye

Bump,

Please help me someone, i've spent hours trying to fix the problem, but i need some help so that i can continue My work on the website.

Thanks.

m_tt

There is a lot going on here and it would be difficult for anyone to help. You need to be sure that error_reporting is set to E_ALL and also display_errors = On in your php.ini

If you are not getting a PHP error I would recommend getting the Firebug extension for FireFox and see if you can pinpoint the problem.

iiccyeye

Thanks for the quick reply matt, atm im not on My desktop, im writing with My iPad, but i will do what you told me to do.
Also to explain the problem a bit more, what i have been experiencing is that the script works but not fully, it wont hide My error messages and it wont send the mail.

If you want to look at how the page looks like and what the problems is then you can visit http://hannac.x10.mx/contacts.html

Sorry for my bad english, i'm from Sweden so that may explain my bad language.
I also want to say that i appriciate all help that i can get, thanks.

m_tt

deleted

m_tt

Actually, I looked again and it is supposed to be AJAX. I think your problem could be with the submit button. It doesn't appear to match what is expected in the jQuery code.

<a class="button" onclick="document.getElementById('contact_form').submit()" href="#">Skicka</a>

According to the jQuery code this should look something like this, adding the ID and removing the onclick

<a id="submit" class="button" href="#">Skicka</a>

iiccyeye

I tested that too with no positive results, it would just take me to the top of the page, and the reset button wouldnt reset the form 🙁

m_tt

If you update the submit button on your page with what I recommended I will take another look.

iiccyeye

I have now updated the code to the one you wanted.

I have also used the firebug debug and i got this:

assignment to undeclared variable contactInit: contactInit = function(){ @contact-form.js (row 1)

anonymous function does not always return a value: return this.each(function(){ @contact-form.js (row 192)

m_tt

The contact-form.js is 404 now

m_tt

I'm not seeing these errors you get in firebug.

Just to see if the code is being executed I would try adding an alert to the clear button.

e.g.

$("a#clear").click(function(){
alert('OK');
});

iiccyeye

I have put an alert line into the script, also i added a var contactInit; at the top to get rid of this error: assignment to undeclared variable contactInit: contactInit = function(){ @contact-form.js (row 1)

var contactInit;
contactInit = function(){
	$('.error').hide();

// reset form and hide all errors
$("a#clear").click(function(){
	$('.error').hide();
	$('form#contact_form').clearForm();
	window.alert('OK');
	return false;
});

The window didnt pop up for me so im not sure what's wrong to be honest.
The only warning i have from firebug now is this one: anonymous function does not always return a value: return this.each(function(){ @contact-form.js (row 194)

For your information, im quite new into php, i do understand quite a bit but im not in a sort of place to find all the bugs, so im thankfull that you are patience with me, thanks.

m_tt

Well this is a javascript problem so far not PHP 😉

What I would do is modify contact-form.js

Remove var contactInit;

Replace this line "contactInit = function() {" with this

$(document).ready(function() {

Then the very last line you will have to change "};" to "});"

iiccyeye

You're a genious 😃
it worked, but im not resiveing any mail, but im going to look into it tomorrow because i have to get some sleep.

I tested the form in IE, Chrome and firefox and im having a problem with IE, when i click on "skicka" it wont do anything, the other browsers dont have that problem.

Thanks for helping me 🙂

m_tt

You still have some issues with validating the form. Use firebug to see the javascript errors when you have an invalid email address, phone, etc.

Your XHR response doesn't have any errors. It is returning "mail sent" - so if you are not receiving emails this is most likely a problem with your server config (not PHP or javascript).

iiccyeye

I have tested the site with firebug now, sometimes i get errors sometimes not, but when i click on send i get this line:

POST [url]http://hannac.x10.mx/bin/MailHandler.php[/url] 200 OK 1.21s.

So as you say the form is getting validated when i fill the form as intended.

Now to the errors that i get, when i for an example leave out the email i get this error:
email is not defined: var dataString = 'name=' + name + '&... '&smtpMailServer=' + smtpMailServer; @contact-form.js (row 163)

but i dont think that's a harmfull error as it only states that there is no email typed.

I did notice that if i type the "Namn" field with numbers for an example, it will say that it's incorrect with the red text but if i have filled out the rest of the fields it will send it anyway, it wont get "name is not defined".

i got this error: uncaught exception:

[Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)" location: "JS frame :: chrome://global/content/bindings/autocomplete.xml :: onxblpopuphiding :: line 825" data: no]

$ is not defined	
	f()			jquery....min.js (row 2)
	f()
	a=["radio", "checkbox"] 
	c=function()
	d=undefined		jquery....min.js (rad 2)


f()				jquery....min.js (rad 2)
a = Window contacts.html#
b = undefined

jquery-1.6.3.min.js()		jquery....min.js (rad 4)

(function(a,b){function cu(a){return f...)&&f.removeEvent(a,h,s.handle),g=null     jquery....min.js (rad 2)

And these warnings:

assignment to undeclared variable fileExtension: fileExtension = serverProcessorType; @contact-form.js (row 169)

anonymous function does not always return a value: return this.each(function(){ @contact-form.js (row 193)

iiccyeye

Bump