CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   PHP (http://www.codingforums.com/forumdisplay.php?f=6)
-   -   Contact Form Doesn't Work (http://www.codingforums.com/showthread.php?t=252358)

unreal99 02-23-2012 01:59 AM
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>

stevenmw 02-23-2012 06:43 AM
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.


All times are GMT +1. The time now is 08:51 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.