SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Form Submission

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Submission

    Ok I posted this in the PHP forum yesterday without much luck so maybe it is better placed here.
    This is going to be a little long winded and i'm not sure if it should be in javascript or php, I have a contact form as follows:

    Code:
    <form action="contact.php" method="POST" id='contact_form'>
    				<p><label for="name">Name</label>
    				<input type='text' name='name' id='name' /></p>
    				<div class="clear"></div>
    				<p id='name_error' class='error'>Enter your name</p>
                    
    				<p><label for="email">Email</label>
    				<input type='text' name='email' id='email' /></p>
    				<div class="clear"></div>
    				<p id='email_error' class='error'>Enter a valid email address</p>
    				
    				<p><label for="telephone">Telephone</label>
    				<input type='text' name='telephone' id='telephone' /></p>
    				<div class="clear"></div>
    				<p id='subject_error' class='error'>Enter your telephone number</p>
                    
                    <p><label for="message">Details</label>
    				<textarea name='message' id='message' rows="30" cols="30"></textarea></p>
    				<div class="clear"></div>
    				<p id='message_error' class='error'>Enter your message</p>
                    
                    <p id='mail_success' class='success'>Thank you. We will be in contact soon.</p>
    				<p id='mail_fail' class='error'>Sorry, an error has occured. Please try again later.</p>
    
    				<div id="button">
    					<input type='submit' id='send_message' class="button" value='Submit' />
                    </div>
    			</form>
    The Javascript:

    Code:
    $(document).ready(function(){
    			$('#send_message').click(function(e){
    				
    				//stop the form from being submitted
    				e.preventDefault();
    				
    				/* declare the variables, var error is the variable that we use on the end
    				to determine if there was an error or not */
    				var error = false;
    				var name = $('#name').val();
    				var email = $('#email').val();
    				var telephone = $('#telephone').val();
    				var message = $('#message').val();
    				
    				
    				if(name.length == 0){
    					var error = true;
    					$('#name_error').fadeIn(500);
    				}else{
    					$('#name_error').fadeOut(500);
    				}
    				if(email.length == 0 || email.indexOf('@') == '-1'){
    					var error = true;
    					$('#email_error').fadeIn(500);
    				}else{
    					$('#email_error').fadeOut(500);
    				}
    				if(telephone.length == 0){
    					var error = true;
    					$('#subject_error').fadeIn(500);
    				}else{
    					$('#subject_error').fadeOut(500);
    				}
    				if(message.length == 0){
    					var error = true;
    					$('#message_error').fadeIn(500);
    				}else{
    					$('#message_error').fadeOut(500);
    				}
    				
    				//now when the validation is done we check if the error variable is false (no errors)
    				if(error == false){
    					//disable the submit button to avoid spamming
    					//and change the button text to Sending...
    					$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
    					
    					//we submit it to contact.asp
    					$.post("contact.php", $("#contact_form").serialize(),function(result){
    						//and after the ajax request ends we check the text returned
    						if($.trim(result) == 'sent'){
    						   $('#button').remove();
    						   $('#mail_fail').fadeOut(500);
    						   $('#mail_success').fadeIn(500);
    						}else{
    							//show the mail failed div
    							$('#mail_fail').fadeIn(500);
    							//reenable the submit button by removing attribute disabled and change the text back to Send The Message
    							$('#send_message').removeAttr('disabled').attr('value', 'Submit');
    						}
    					});
    				}
    			});    
    		});
    and the PHP:

    Code:
    <?php
    
    $EmailFrom = Trim(stripslashes($_POST['email'])); 
    $EmailTo = "joe@bloggs.com";
    $Subject = "Contact Form Message";
    $name = Trim(stripslashes($_POST['name'])); 
    $email = Trim(stripslashes($_POST['email']));
    $telephone = Trim(stripslashes($_POST['telephone'])); 
    $message = Trim(stripslashes($_POST['message'])); 
    
    
    $validationOK=true;
    if (Trim($name)=="") $validationOK=false;
    if (Trim($email)=="") $validationOK=false;
    if (Trim($telephone)=="") $validationOK=false;
    if (Trim($message)=="") $validationOK=false;
    if (!$validationOK) {
      print "failed";
      exit;
    }
    
    
    $Body = "";
    $Body .= "name: ";
    $Body .= $name;
    $Body .= "\n";
    $Body .= "email: ";
    $Body .= $email;
    $Body .= "\n";
    $Body .= "telephone: ";
    $Body .= $telephone;
    $Body .= "\n";
    $Body .= "message: ";
    $Body .= $message;
    $Body .= "\n";
    
    
    $success = mail($EmailTo, $Subject, $Body, "From: <$email>");
    
    if ($success){
      print "sent";
    }
    else{
      print "failed";
    }
    ?>
    When filled out i receive the "Sorry, an error has occured. Please try again later." message but don't see where i have gone wrong?

    Thanks in advance for any help.[/QUOTE]

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clearly the message is a result of what is returned from

    Code JavaScript:
    $.post("contact.php", $("#contact_form").serialize(),function(result){

    not been the string "sent".

    I would firstly put an alert to view the result

    Code JavaScript:
    if($.trim(result) == 'sent'){
    	$('#button').remove();
    	$('#mail_fail').fadeOut(500);
    	$('#mail_success').fadeIn(500);
    }else{
            alert(result)
    	//show the mail failed div
    	$('#mail_fail').fadeIn(500);
    	//reenable the submit button by removing attribute disabled and change the text back to Send The Message
    	$('#send_message').removeAttr('disabled').attr('value', 'Submit');
    }

    This will probably be "failed" but might be something more interesting.

    If it is "failed" change the PHP code to ascertain whether it is a problem with the validation or mail send.


Bookmarks

Posting Permissions

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