Contact form assistance using jquery for validation

**Ossy** · Oct 19, 2011 23:02

Hello,

I've tried creating a contact form using the folllowing:

HTML Code:

<form name="contact_form" method="post" action="">      
    <p>
      <label for="name" class="fixedwidth">Your Name: </label>
      <input name="name" type="text" id="name" size="40" />
      <label for="name" id="name_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="email" class="fixedwidth">Your Email: </label>
      <input name="email" type="text" id="email" size="40" />
      <label for="email" id="email_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="subject" class="fixedwidth">Subject: </label>
      <input name="subject" type="text" id="subject" size="40" />
      <label for="subject" id="subject_error" class="error"><em>*</em></label>
    </p>
    <p>
      <label for="msg" class="fixedwidth">Your Message: </label>
      <textarea name="msg" id="msg" cols="40" rows="7"></textarea>
      <label for="msg" id="msg_error" class="error"><em>*</em></label>
    </p>
    <div id="button">
      <input name="submit" type="submit" value="Submit" class="button" />
    </div>
    </form>

Code:

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  $(".button").click(function() {
		
    $('.error').hide();
	
          var name = $("input#name").val();  
          if (name == "") {  
          $("label#name_error").show();  
          $("input#name").focus();  
          return false;  
        }  
          var email = $("input#email").val();  
          if (email == "") {  
          $("label#email_error").show();  
          $("input#email").focus();  
          return false;  
        }  
          var subject = $("input#subject").val();  
          if (subject == "") {  
          $("label#subject_error").show();  
          $("input#subject").focus();  
          return false;  
        }  
		 var msg = $("textarea#msg").val();  
            if (msg == "") {  
          $("label#msg_error").show();  
          $("textarea#msg").focus();  
          return false;
    }
		var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&msg=' + msg;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#contact').html("<div id='message'></div>");
        $('#message').html("<h2>Your Message Was Submitted!</h2>")
        .append("<p>We will be in touch with you soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
	});
});
runOnLoad(function(){
  $("input#name").select().focus();
});

PHP Code:


<?php

if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {

    $name = stripslashes(strip_tags($_POST['name']));

} else {$name = 'No name entered';}

if ((isset($_POST['email'])) && (strlen(trim($_POST['email'])) > 0)) {

    $email = stripslashes(strip_tags($_POST['email']));

} else {$email = 'Invalid email';}

if ((isset($_POST['subject'])) && (strlen(trim($_POST['subject'])) > 0)) {

    $phone = stripslashes(strip_tags($_POST['subject']));

} else {$phone = 'No Subject';}

if ((isset($_POST['msg'])) && (strlen(trim($_POST['msg'])) > 0)) {

    $phone = stripslashes(strip_tags($_POST['msg']));

} else {$phone = 'No message entered';}

ob_start();

?>

<html>

<head>

<style type="text/css">

</style>

</head>

<body>

<table width="550" border="1" cellspacing="2" cellpadding="2">

  <tr bgcolor="#eeffee">

    <td>Name</td>

    <td><?=$name;?></td>

  </tr>

  <tr bgcolor="#eeeeff">

    <td>Email</td>

    <td><?=$email;?></td>

  </tr>

  <tr bgcolor="#eeffee">

    <td>Subject</td>

    <td><?=$subject;?></td>

  </tr>

  <tr bgcolor="#eeffee">

    <td>Message</td>

    <td><?=$msg;?></td>

  </tr>

</table>

</body>

</html>

<?

$body = ob_get_contents();



$to = 'myemail.com';

$email = 'myemail.com';

$fromaddress = "myemail.com";

$fromname = "Online Contact";



require("/class.phpmailer.php");



$mail = new PHPMailer();



$mail->From     = "myemail.com";

$mail->FromName = "Contact Form";

$mail->AddAddress("email_address@example.com","Name 1");

$mail->AddAddress("another_address@example.com","Name 2");



$mail->WordWrap = 50;

$mail->IsHTML(true);



$mail->Subject  =  "Form:  Contact form submitted";

$mail->Body     =  $body;

$mail->AltBody  =  "This is the text-only body";



if(!$mail->Send()) {

    $recipient = 'myemail.com';

    $subject = 'Contact form failed';

    $content = $body;    

  mail($recipient, $subject, $content, "From: mail@yourdomain.com\r\nReply-To: $email\r\nX-Mailer: DT_formmail");

  exit;

}

?>

Everything works from a users end- meaning the form validates that all fields have been filled in, and the user gets the confirmation message, without the page refreshing, that form was submitted..... BUT I do not receive the emails. I'm assuming there must be an issue within the php.

What error(s) have I made????

Also, if you could assist with a better jquery validation, it would be greatly appreciated!!!

Regards,

**ParkinT** · Oct 21, 2011 14:46

If you view your server logs you may see messages being generated and sent to "myemail.com' because that is the value set for $recipient just before the mail process is called.

**Ossy** · Oct 23, 2011 09:16

Hey ParkinT,

Thanks for your reply, but i do have my actual email address set as the value for $recipient. "myemail.com" was just for example purposes.

**Ossy** · Oct 28, 2011 05:13

Do you have any other suggestions? I'm still experiencing difficulty with this.

**Ossy** · Oct 30, 2011 09:53

So with the help from Cups in the PHP forum, I've been able to gain a understanding of php along with the PHPMailer etc. I've re-written my coding and all is fine in receiving emails. Now my issue is validating. I've tried to validate on both the jquery and php side, but not having any luck. Here is my new coding:

HTML code:

<form action="" method="post" id="contact_form">
<p>
<label for="name">Name</label>
<input type="text" name="name" size="30" id="name" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" size="30" id="email" />
</p>
<p>
<label for="subject">Subject</label>
<input type="text" name="subject" size="30" id="subject" />

</p>
<p>
<label for="message">Message</label>
<textarea id="message" name="message" cols="40" rows="7"></textarea>
</p>
<p>
<input type="submit" value="Submit" class="submit" />
</p>
</form>

jQuery code:

$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {

$('.error').hide();

var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var subject = $("input#subject").val();
if (subject == "") {
$("label#subject_error").show();
$("input#subject").focus();
return false;
}
var msg = $("textarea#msg").val();
if (msg == "") {
$("label#msg_error").show();
$("textarea#msg").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&subject=' + subject + '&msg=' + msg;
//alert (dataString);return false;

$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#contact').html("<div id='message'></div>");
$('#message').html("<h2>Your Message Was Submitted!</h2>")
.append("<p>We will be in touch with you soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});

Can you assist me with my validation?

User Tag List

Thread: Contact form assistance using jquery for validation

Thread Tools

Display

Contact form assistance using jquery for validation

Bookmarks

Bookmarks

Posting Permissions