SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Contact form assistance using jquery for validation

    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,

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,329
    Mentioned
    191 Post(s)
    Tagged
    4 Thread(s)
    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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have any other suggestions? I'm still experiencing difficulty with this.

  5. #5
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


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
  •