Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 1 Time in 1 Post

    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>

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •