Go Back   CodingForums.com > :: Server side development > PHP
Reload this Page Contact Form Doesn't Work

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-23-2012, 01:59 AM   PM User | #1
unreal99
New to the CF scene

 
Join Date: Feb 2012
Posts: 2
Thanks: 0
Thanked 1 Time in 1 Post
unreal99 is an unknown quantity at this point
Contact Form Doesn't Work
Hey guys,
I would greatly appreciate if someone can take a quick look and tell me where is my mistake with the form embedded in the index.html file (almost sure it's related to the 'action=' part)
Im trying to use the js/form-top.js to parse the form data and use the bin/form-top.php to post it. I must do something wrong. The relevant code section is:

form-top.ashx
PHP Code:
<?php
    $owner_email = $_POST["owner_email"];
    $headers = 'From:' . $_POST["email"];
    $subject = 'A quick towing quote from: ' . $_POST["name"];
    $messageBody = "";
    
    $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
    $messageBody .= '<br>' . "\n";
    $messageBody .= '<p>From: ' . $_POST['from'] . '</p>' . "\n";
    $messageBody .= '<br>' . "\n";
    $messageBody .= '<p>To: ' . $_POST['to'] . '</p>' . "\n";
    $messageBody .= '<br>' . "\n";
    $messageBody .= '<p>Phone: ' . $_POST['phone'] . '</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";
    }
?>
form-top.ashx
PHP Code:
<%@ 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>From: " + context.Request.Form.Get("from") + "</p>\n";
        messageBody += "<br>\n";
        messageBody += "<p>To: " + context.Request.Form.Get("to") + "</p>\n";
        messageBody += "<br>\n";
        messageBody += "<p>Phone Number: " + context.Request.Form.Get("phone") + "</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;
        }
    }
} 

form-top.js
Code:
$(function(){
	$('.error').fadeOut(0);
	
	// reset form and hide all errors
	$("a#clear").click(function(){
		$('.error').fadeOut(0);
		$('form#contact-form').clearForm();
	});
	
	// show message error if after editing
	// the name field contains improper value
	$("input#name").blur(function(){
		if(validateInput('name')){
			if(!validateName()){
				$("label#name_error").fadeOut(0);
				$("label#name_error2").fadeIn(250);
			}
		}else{
			$("label#name_error2").fadeOut(0);
		}
	});
	
	// show message error if after editing
	// the email field contains improper value
	$("input#email").blur(function(){
		if(validateInput('email')){
			if(!validateEmail()){
				$("label#email_error").fadeOut(0);
				$("label#email_error2").fadeIn(250);
			}
		}else{
			$("label#email_error2").fadeOut(0);
		}
	});
	
	// show message error if after editing
	// the phone field contains improper value
	$("input#phone").blur(function(){
		if(validateInput('phone')){
			if(!validatePhone()){
				$("label#phone_error").fadeOut(0);
				$("label#phone_error2").fadeIn(250);
			}
		}else{
			$("label#phone_error2").fadeOut(0);
		}
	});
	
	// show message error if after editing
	// the message field contains improper value
	$("textarea#message").blur(function(){
		if(validateTextArea('message')){
			if(!validateMessage()){
				$("label#message_error").fadeOut(0);
				$("label#message_error2").fadeIn(250);
			}
		}else{
			$("label#message_error2").fadeOut(0);
		}
	});
	
	$("input#name").keydown(function(){
		if(validateInput('name')){
			$("label#name_error").fadeOut(0);
		}
		if(validateName()){
			$("label#name_error2").fadeOut(0);
		}
	});
	
	$("input#email").keydown(function(){
		if(validateInput('email')){
			$("label#email_error").fadeOut(0);
		}
		if(validateEmail()){
			$("label#email_error2").fadeOut(0);
		}
	});
	
	$("input#phone").keydown(function(){
		if(validateInput('phone')){
			$("label#phone_error").fadeOut(0);
		}
		if(validatePhone()){
			$("label#phone_error2").fadeOut(0);
		}
	});
	
	$("textarea#message").keydown(function(){
		if(validateTextArea('message')){
			$("label#message_error").fadeOut(0);
		}
		if(validateMessage()){
			$("label#message_error2").fadeOut(0);
		}
	});
	
	var owner_email = $("input#owner_email").val();
	if(!isValidEmailAddress(owner_email)){
		$('#contact_form').html("<label class='error'>*Owner email is not valid</label>")
	}
		
	$("a#submit").click(function(){
		// validate and process form
		var quit = false;
		if(validateName()){
			name = validateName();
			$("label#name_error").fadeOut(0);
			$("label#name_error2").fadeOut(0);
		}else if(validateInput('name')){
			$("label#name_error").fadeOut(0);
			$("label#name_error2").fadeIn(250);
			quit = true;
		}else{
			$("label#name_error").fadeIn(250);
			$("label#name_error2").fadeOut(0);
			quit = true;
		}
		if(validateEmail()){
			email = validateEmail();
			$("label#email_error").fadeOut(0);
			$("label#email_error2").fadeOut(0);
		}else if(validateInput('email')){
			$("label#email_error").fadeOut(0);
			$("label#email_error2").fadeIn(250);
			quit = true;
		}else{
			$("label#email_error").fadeIn(250);
			$("label#email_error2").fadeOut(0);
			quit = true;
		}
		if(validatePhone()){
			phone = validatePhone();
			$("label#phone_error").fadeOut(0);
			$("label#phone_error2").fadeOut(0);
		}else if(validateInput('phone')){
			$("label#phone_error").fadeOut(0);
			$("label#phone_error2").fadeIn(250);
			quit = true;
		}else{
			$("label#phone_error").fadeIn(250);
			$("label#phone_error2").fadeOut(0);
			quit = true;
		}
		if(validateMessage()){
			message = validateMessage();
			$("label#message_error").fadeOut(0);
			$("label#message_error2").fadeOut(0);
		}else if(validateTextArea('message')){
			$("label#message_error").fadeOut(0);
			$("label#message_error2").fadeIn(250);
			quit = true;
		}else{
			$("label#message_error").fadeIn(250);
			$("label#message_error2").fadeOut(0);
			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 = 'ashx';
		}else{
			fileExtension = serverProcessorType;
		}
		var mailHandlerURL = "bin/form-top." + fileExtension;
		$.ajax({
			type: "POST",
			url: mailHandlerURL,
			data: dataString,
			success: function(){
				$('.error').fadeOut(0);
				$('form#contact-form').clearForm();
				$('#contact_form').html("<div>Contact form submitted!</div>").append("<br><label for='message'><strong>We will be in touch soon.</strong></label>").fadeOut(0).fadeIn(1500, function(){
					$('#contact_form').append("<br><br><a id='back' onclick='window.location.reload(); return false;' class='button'>back</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 <= 19){
		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;
	}
}

index.html
Code:
<form id="form-top" action="#" method="post" enctype="multipart/form-data">
                            <fieldset>
										<input type="hidden" name="owner_email" id="owner_email" value="dummy@mail.com" />
										<input type="hidden" name="serverProcessorType" id="serverProcessorType" value="php" />
										<input type="hidden" name="smtpMailServer" id="smtpMailServer" value="localhost" />
										<input type="hidden" name="stripHTML" id="stripHTML" value="true" />
                                <div class="form-top">					
                                    <div class="col-3">
                                        <span><input name="name" id="from" value="Tow From...." onBlur="if(this.value=='') this.value='Tow From....'" onFocus="if(this.value =='Tow From....' ) this.value=''" /></span>
                                        <span><input name="name" id="to" value="Tow To...." onBlur="if(this.value=='') this.value='Tow To....'" onFocus="if(this.value =='Tow To....' ) this.value=''" /></span>
										<span><input name="name" id="name" value="Name..." onBlur="if(this.value=='') this.value='Name...'" onFocus="if(this.value =='Name...' ) this.value=''" /></span>
                                        <span><input name="name" id="phone" value="Phone..." onBlur="if(this.value=='') this.value='Phone...'" onFocus="if(this.value =='Phone...' ) this.value=''" /></span>
									
                                    </div>
                                    <div class="col-4">
									<br><br><br><br>
								
								    <a type='button' class='button' onClick="document.getElementById('form-top').submit()" id="submit">GO!</a> 
								
                                    </div>								
                                </div>
                            </fieldset>
                        </form>
unreal99 is offline   Reply With Quote
Old 02-23-2012, 06:43 AM   PM User | #2
stevenmw
Regular Coder

 
stevenmw's Avatar
 
Join Date: Jun 2007
Location: OK
Posts: 446
Thanks: 26
Thanked 30 Times in 30 Posts
stevenmw is an unknown quantity at this point
I don't know if you took the file out of your action on purpose or not. But your form doesn't have an action at all. It simple says


Code:
action="#"
I'm not fluent in JavaScript, but I would look into submitting forms using PHP and JavaScript.

You can declare what php file to use as the action in your JavaScript. Which in your case should be helpful.

Take a look at this tutorial.
http://www.askaboutphp.com/213/php-a...-the-page.html

Maybe you can take some ideas from this, and apply it to your code. Looking through your script it shouldn't be too hard.


If it were me I would write most of the validation stuff you've got in form-top.js as PHP, and use JavaScript only for submitting the form. But that's just me.


A nice Ajax contact form tutorial is over at http://tutorialzine.com/2009/09/fancy-contact-form/

They;ve gone in a little bit different of a direction than you, but it's a pretty nice script.
Last edited by stevenmw; 02-23-2012 at 06:49 AM..
stevenmw is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 12:28 PM.
Advertisement
Log in to turn off these ads.