I am relatively new to web design and have a problem with a Form submittal. I have listed my code below. I have used Font Awesome to render the icons on the web page. I have used Parsley from
http://parsleyjs.org for the form validation which works perfectly. I have used the jQuery Form Plugin from
http://malsup.com/jquery/form/ to handle the form functioning. I receive the contact form email perfectly. However, I also have a dialogue box alert pop-up with the message "undefined", when I would expect the dialogue box alert pop-up with the message " Thank you! We have received your message! ". The CSS3 used is correct but I cannot see what is ausing the "undefined" error. Any help would be greatly appreciated! Thank you! Narelle!
*------------------------------------*
HTML5 Code
*------------------------------------*
<form action="contact_us/process_contact_form.php" method="post" data-validate="parsley">
<div class="span7">
<p>Here you can contact us with any comments, suggestions or questions.</p>
<div class="row-fluid mtl">
<div class="control-group span12">
<label for="contactMsg" class="control-label">How can we help?</label>
<div class="controls">
<textarea class="span12" id="contactMsg" name="message" data-trigger="change" data-required="true" maxlength="500" data-maxlength="500" rows="5" data-regexp="^[\w\., ]+$"></textarea>
</div>
</div>
</div>
<div class="row-fluid">
<div class="control-group span6">
<label for="contactName" class="control-label">Your name</label>
<div class="controls">
<input type="text" id="contactName" name="contactName" placeholder="" data-trigger="change" data-required="true" maxlength="50" data-maxlength="50" class="span12" data-regexp="^((?!
http://).|\s)+$">
</div>
</div>
<div class="control-group span6">
<label for="contactEmail" class="control-label">Your email address</label>
<div class="controls">
<input type="text" id="contactEmail" name="contactEmail" placeholder="" data-trigger="change" data-required="true" data-type="email" class="span12">
</div>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<div class="controls">
<a data-loading-text="<i class='fa fa-spinner fa-spin'></i> Submitting ..." class="btn btn-primary btn-loading span6">Submit</a>
<div class="sentMsg span6 hide">
<h6>
<i class="fa fa-check-circle-o fa-lg"></i>
<span>Thank you! We have received your message!</span>
</h6>
</div>
</div>
</div>
</div>
</div>
</form>
*------------------------------------*
PHP Code - process_contact_form.php
*------------------------------------*
<?php
if( isset($_POST) ){
//form validation vars
$formok = true;
$errors = array();
//submission data
$ipaddress = $_SERVER['REMOTE_ADDR'];
$date = date('d/m/Y');
$time = date('H:i:s');
//form data
$message = $_POST['message'];
$name = $_POST['contactName'];
$email = $_POST['contactEmail'];
//validate form data
//validate name is not empty
if(empty($name)){
$formok = false;
$errors[] = "You have not entered your name";
}
//validate email address is not empty
if(empty($email)){
$formok = false;
$errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$formok = false;
$errors[] = "You have not entered a valid email address";
}
//validate message is not empty
if(empty($message)){
$formok = false;
$errors[] = "You have not entered a message";
}
//send email if all is ok
if($formok){
$headers = "From:
email@mydomain.com" . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$emailbody = "<p>You have received a new message from the contact form on your website.</p>
<p><strong>Name: </strong> {$name} </p>
<p><strong>Email Address: </strong> {$email} </p>
<p><strong>Message: </strong> {$message} </p>
<p>This message was sent from IP Address: {$ipaddress} on {$date} at {$time}</p>";
mail("
email@mydomain.com ","New Enquiry",$emailbody,$headers);
}
}
?>
$(document).ready(function() {
$("form").submit(function(e){
e.preventDefault();
contactConfirm();
});
$('.btn-loading').on('click', function() {
contactConfirm();
});
});
function contactConfirm() {
if ($('form').parsley('validate')) {
$('.btn-loading').button('loading');
$('form').ajaxSubmit(function (responseResult) {
if (responseResult.code == '0') {
$('.btn-loading').addClass('hide');
$('.btn-loading').button('reset');
$('.sentMsg').removeClass('hide');
}
else {
alert(responseResult.message);
$('.btn-loading').button('reset');
}
});
}
}