I think this is the correct forum topic so I apologise if not.
I have an included header.php which is home to my navigation. I was hoping to that instead of having a standard contact page I would have a flashy jquery modal box appear housing the contact form with validation. Thankfully Twitter bootstrap provides this and I can display the modal. I also am using the jquery.validate.pack.js to validate the form which is working. My problem is that once the submit button is clicked on the modal, it disappears and there is no indication of the form being submitted or any errors. However if I open the modal up I can see the error if fields are missing.
How can I keep the modal open to display any errors or a success message?
Here’s my code which is from a tutorial at this address http://codehunterbd.wordpress.com/2010/10/28/php-contact-form-with-jquery-validation/
header.php
<?php
if ($_POST['go'] == 2) {
$subject = 'Website Enquiry';
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'email-here'; //Put your own email address here
$body = "Name: $name \
\
Email: $email \
\
Subject: $subject \
\
Comments:\
$comments";
$headers = 'From: Test Site<'.$emailTo.'>' . "\\r\
" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap default</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.php"> Default</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="#contact" data-toggle="modal">Contact Us</a></li>
<li><a href="products.php">Products</a></li>
<li><?php include 'includes/searchbox.php';?></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="contact" class="modal hide fade in modal-wrapper" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Contact-Us</h3>
</div>
<div class="modal-body">
<?php if(isset($hasError)) { //If errors are found ?>
<p>Please check if you've filled all the fields with valid information. Thank you.</p>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<p><strong>Email Successfully Sent!</strong></p>
<p>Thank you. Your email was successfully sent and I will be in touch with you soon.</p>
<?php } ?>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-horizontal" id="contactform">
<div class="control-group">
<div class="controls">
<label for="name"><strong>Name:</strong></label>
<input class="frminput" type="text" name="contactname" id="contactname" placeholder="Your name">
</div>
</div>
<div class="control-group">
<div class="controls">
<label for="email"><strong>Email:</strong></label>
<input class="frminput" type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<div class="controls">
<label for="message"><strong>Message:</strong></label>
<textarea class="frminput" name="message" id="message" rows="3" placeholder="Your message."></textarea>
</div>
</div>
<div class="pull-right">
<input type="hidden" name="save" value="contact">
<input type="hidden" name="go" value="2">
<button type="submit" id="contact-submit" class="btn btn-success">Send</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</form>
</div>
</div>
Here’s my javascript which is included in my footer.php page
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate();
});
</script>
Any help with this would be great. Been going round in circles for two days now trying to get it to work.