SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    382
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - $.post Form Validation ?

    jQuery - $.post Form Validation ?

    Hi all

    I'm not sure if this is a JQuery, HTML or PHP problem.

    I have a simple Form here that passes the name, email etc to a php script with JQuery.

    http://www.ttmt.org.uk/forum/jForm/

    The Form works as expected - if all the fields are filled in you get a Thank You and the email is sent, if all the fields are not filled in you get a message asking you to.

    The problem is when the send button is pressed and the information is sent the text fields still contain the text - I think the text fields should empty once the send button is pressed.

    I'm I doing something wrong or do I need to clear the text fields myself when
    the send button is pressed.

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="js/jQuery1.4.3.js"></script>
      <script type="text/javascript">
        $(function(){
          $('#contactForm').submit(function(){
            var unameVal = $("#name").val();
            var emailVal = $("#email").val();
            var messageVal = $("#message").val();
            $.post("contact.php", { username: unameVal, email: emailVal, message: messageVal }, function(data){
              $("#status p").html(data);
            });
            return false;
          });
        });
      </script>
    	<title>Form Test</title>
    	<style type="text/css" media="screen">
    	  *{
    	    margin:0;
    	    padding:0;
    	  }
        html, body{
          height:100%;
          font:100% "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        form{
          margin:30px;
          width:23em;
        }
        
        #status p{
          margin:30px;
          font-weight:bold;
        }
        
        form fieldset{
          border:0;
        }
        
        form label,
        form input,
        form select{
          float:left;
        }
    
        form label{
          width:100%;
        }
    
        form input,
        form textarea{
          background:#eee;
          width:100%;
          border-width:0;
          padding:.35em .2em;
          margin-bottom:8px;
          font-size:1em;
          border-top:1px solid #ddd;
          border-left:1px solid #ddd;
          border-right:1px solid #fff;
          border-bottom:1px solid #fff;
          font:1em "Helvetica Neue", Helvetica, Arial, sans-serif;;
        }
    
        form input:focus,
        form textarea:focus,
        form input:hover,
        form textarea:hover{
          background:#e1dfdf;
        }
    
        form #send{
          width:80px;
        }
    	</style>
    </head>
      
    <body>
    
      <form method="post" id="contactForm" action="">
        <fieldset>
          <label for="name">Name:</label>
          <input type="text" id="name" />
          <label for="email">Email:</label>
          <input type="text" id="email" />
          <label for="subject">Subject:</label>
          <input type="text" id="subject">
          <label for="text">Message:</label>
          <textarea id="message" rows="10" col="30"></textarea>
          <p><input type="submit" value="SEND" id="send" /></p>
        </fieldset>
      </form>
      <div id="status">
        <p></p>
      </div>          
           
    </body>
    </html>

    PHP

    Code:
    <?php
      $errors = array();
      $required_fields = array('username','email','message');
      foreach($required_fields as $fieldname){
         if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname])){
            $errors[] = $fieldname;
         }
      }
      if(empty($errors)){
         $to = "info@ttmt.org.uk";
         $username = $_POST['username'];
         $name = explode(' ', $username);
         $firstname = ucfirst($name[0]);
         $email_field = $_POST['email'];
         $subject = "Email from Website";
         $message = $_POST['message'];
         //
         $body = "From: $name_field\n E-Mail: $email_field\n  Message:\n $message";
         //
         mail($to, $subject, $body);
         
         print "Thank you $firstname";
      }else{
         print "Please complete all fields.";
      }
    ?>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi ttmt,

    Because you're submitting the form using AJAX, the values will remain in the form, so you will have to clear the values manually when the send is successful.

    You can do this very simply with something like:

    Code:
    $("input[type=text], textarea").val("");
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


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
  •