HI , i am not able to see the "Thank you " message(next page) after clicking on the submit button. After entering all the fields and clicking on the submit button, it gives validation error for the "your message" field although i have written some text int this field. And "your message " field content gets cleared.
I have given the screenshots in the attachment. Please see the attached doc.
Below is the code of jcontact.php file
<?php
// Set email variables
$email_to = 'jkoracle23@gmail.com';
$email_subject = 'Form submission';
// Set required fields
$required_fields = array('fullname','email','comment');
// set error messages
$error_messages = array(
'fullname' => 'Please enter a Name to proceed.',
'email' => 'Please enter a valid Email Address to continue.',
'comment' => 'Please enter your Message to continue.'
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// check form submittal
if(!empty($_POST)) {
// Sanitise POST array
foreach($_POST as $key => $value) $_POST[$key] = remove_email_injection(trim($value));
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)) array_push($validation, $field);
// check there is information in the field?
if($_POST[$field] == '') array_push($validation, $field);
// validate the email address supplied
if($field == 'email') if(!validate_email_address($_POST[$field])) array_push($validation, $field);
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'New Website Comment: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value) {
if($key != 'submit') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
function validate_email_address($email = FALSE) {
return (preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? TRUE : FALSE;
}
function remove_email_injection($field = FALSE) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
?>
<!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>
<!-- Contact Form Designed by James Brand @ dreamweavertutorial.co.uk -->
<!-- Covered under creative commons license - http://dreamweavertutorial.co.uk/permissions/contact-form-permissions.htm -->
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="contact/css/contactform.css" />
<!--<link href="contact/css/contactform.css" rel="stylesheet" type="text/css" /> commented by jitu-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="contact/validation/validation.js"></script>
<script type="text/javascript">
<!--
var nameError = '<?php echo $error_messages['fullname']; ?>';
var emailError = '<?php echo $error_messages['email']; ?>';
var commentError = '<?php echo $error_messages['comment']; ?>';
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('contact/images/x.png')">
<div id="formWrap">
<div id="form">
<?php if($form_complete === FALSE): ?>
<form action="jcontact.php" method="post" id="comments_form">
<div class="row">
<div class= "label">Your Name</div><!-- end .label-->
<div class="input">
<input type="text" id ="fullname" class="detail" name="fullname" value= "<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>" /> <?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>
</div><!-- end .input -->
<div class="context">e.g John Smith or Randy Crow</div> <!-- end .context-->
</div> <!-- end . row-->
<div class="row">
<div class= "label">Your Email Address</div><!-- end .label-->
<div class="input">
<input type="text" id ="email" class="detail" name="email" value= "<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
</div><!-- end .input -->
<div class="context">We will not share your email with anyone or Spam you with messages either
</div> <!-- end .context-->
</div> <!-- end . row-->
<div class="row">
<div class= "label">Your Message </div><!-- end .label-->
<div class="input">
<textarea id="comment" value="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?></textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div><!-- end .input -->
</div> <!-- end . row-->
<div class="submit">
<input type="submit" name="submit" id = "submit" value="Send Message to RGBTest"/>
</div><!-- end .submit-->
</form>
<?php else: ?>
<p>Thank you for your Message!</p>
<?php endif; ?>
</div><!--end #form end -->
</div><!-- end formWrap-->
</body>
</html>
Below is the code for contactform.css
body {
background:E9E9E9;
}
#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
background:#FFF;
border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 16px 40px;
}
#formWrap #form {
border-top:1px solid #EEE;
width:720px;
}
#formWrap #form .row {
border-bottom:1px dotted #EEE;
display:block;
line-height:38px;
overflow:auto;
padding:24px 0px;
width:100%;
}
#formWrap #form .row .label {
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
width:180px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}
#formWrap #form .row .input {
float:left;
margin-right:10px;
width:auto;
}
.detail {
width:260px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
margin:0;
display:block;
}
.mess{
width:450px;
max-width:450px;
height:280px;
overflow:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
line-height:1em;
margin:0;
display:block;
}
#formWrap #form .row .context {
color:#999;
font-size:11px;
font-style:italic;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
width:200px;
float:left;
}
#formWrap #form #submit {
font-family:Arial, Helvetica, sans-serif;
margin-top:25px;
margin-left:200px;
color:#000;
font-size:16px;
text-shadow:1px 1px 1px #999;
padding:10px;
}
span.error
{
color:#CC0000;
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-image:url(../images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:25px;
}
Below is the code for validaton.js
window.addEvent('domready', function() {
// Get the form
var form = $('comments_form');
// if the form is found...
if (form) {
// obtain error fields
var name = $('fullname');
var email = $('email');
var comment = $('comment');
// Set the default status
var isValid = true;
// input error function for the error messages
var addError = function (field, msg) {
field.addClass('error'); // Add error class to field
var error = field.getParent().getElement('span') || new Element('span', {'class': 'error'}); // add error message if not already placed
error.set('text', msg); // error text msg
error.inject(field, 'after'); // Insert error message after field
};
// detach error function used to delete any error messages and remove the error class
var removeError = function (field) {
field.removeClass('error'); // Remove error class from form fields
var error = field.getParent().getElement('span'); // find any existing error messages
// destroy if error message
if (error) {
error.destroy();
}
};
// insert submit form event
form.addEvent('submit', function (e) {
// Test name length
if (name.get('value').length === 0) {
isValid = false;
addError(name, nameError);
} else {
isValid = true;
removeError(name);
}
// check email length
if (email.get('value').length === 0) {
isValid = false;
addError(email, emailError);
// check email validity
} else if (!email.get('value').test(/^([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/)) {
isValid = false;
addError(email, emailError);
} else {
isValid = true;
removeError(email);
}
// check comment length
if (comment.get('value').length === 0) {
isValid = false;
addError(comment, commentError);
} else {
isValid = true;
removeError(comment);
}
// If form invalid then stop event happening
if (!isValid) {
e.stop();
}
});
}
});
