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


<!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


<?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\
 E-Mail: $email_field\
  Message:\
 $message";
     //
     mail($to, $subject, $body);
     
     print "Thank you $firstname";
  }else{
     print "Please complete all fields.";
  }
?>


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:

$("input[type=text], textarea").val("");