Hi Drummin or anyone reading this post,
My form has been working perfect as per Drummin’s solution but I tried to AJAXify the form because of two reasons:
-
On clicking the Subscribe button, my bootstrap modal closes leaving the user clueless as to the result of the form submission. The user cannot find out whether the form was submitted successfully or not until he clicks on the subscribe link again and the modal is opened again where the message is displayed. I want the notification to appear simultaneously to the form submission in the same modal window…without it closing.
-
Clicking on the refresh button would resubmit the form!
…however I am sure I am missing something because of which the form freezes with a faded white screen inside the modal…and the form never sends then. Can you help? Here’s my code:
index.php
<div id="SubscribeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">✕</button>
</div>
<div class="modal-body">
<form id="SubForm" name="SubForm" method="post" novalidate="novalidate">
<h3 class="form-subscribe-heading">Solaron's Risk Alerts!</h3>
<h4>Subscribe to our ESG Risk Alerts and stay updated!</h4>
<p>Please use a company/official address to subscribe</p>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" name="firstname" id="firstname" value="" class="form-control input-md" placeholder="your first name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" name="lastname" id="lastname" value="" class="form-control input-md" placeholder="your last name" />
</div>
</div><p></p>
<input type="text" value="" name="email" id="email" class="form-control" placeholder="your email address" required /><br />
<div class="clear">
<input id="submit" type="submit" name="submit" value="Subscribe" class="btn btn-md btn-primary" />
</div>
</form>
<div id="alert" class="row-fluid">
<div class="span12">
<?php
if(isset($notice)){
echo $notice;
}else{
//Show error for missing field
if(isset($error)){echo $error;}
?>
<?php
}
?>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
<div class="alignright">
<a data-toggle="modal" href="#SubscribeModal" class="text-muted">Subscribe</a>
</div>
<!-- Core JavaScript
================================================== -->
<script src="/solaron/js/script.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
// validate contact form
$(function() {
$('#SubForm').validate({
rules: {
firstname: {
required: true,
minlength: 2
},
lastname: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your first name",
minlength: "your name must consist of at least 2 characters"
},
email: {
required: "Please enter a valid official/company email address to subscribe"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"subscribe.php",
success: function() {
$('#SubForm :input').attr('disabled', 'disabled');
$('#SubForm').fadeTo( "slow", 0.15, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn();
});
},
error: function() {
$('#SubForm').fadeTo( "slow", 0.15, function() {
$('#error').fadeIn();
});
}
});
}
});
});
</script>
subscribe.php
<?php
$mailto = "abc@company.com";
$from = $_REQUEST['email'];
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$subject = "Please subscribe me to your Risk Alerts. Thank you.";
$body = "
<br>
<p>The following information was submitted through the Risk Alert's subscription form on your website:</p>
<p><b>Name</b>: $firstname $lastname<br>
<b>Email</b>: $email<br>
";
$headers = "From: $firstname $lastname <$email> \\r\
";
$headers .= "Reply-To: $from \\r\
";
$headers .= "MIME-Version: 1.0\\r\
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\\r\
";
$message = "<html><body>$body</body></html>";
//build list of not allowed providers as lowercase
$NotAllowedClients = array("aol","applemail","comcast","entourage","gmail","hotmail","outlook","iphone");
preg_match_all('/\\@(.*?)\\./',$email,$clientarr);
$client = strtolower($clientarr[1][0]);
if(in_array($client,$NotAllowedClients)){
//Failed
$notice = "<div class=\\"row-fluid\\">
<div class=\\"span12\\">
<h3>Subscription Failed!</h3>
<p>Please use an official/company email address to subscribe. <a href=\\"?\\">Try again</a></p>
</div>
</div>";
}else{
//Passed
//echo $message;
mail($mailto, $subject, $message, $headers);
$notice = "<div class=\\"row-fluid\\">
<div class=\\"span12\\">
<h3>Subscription successful!</h3>
<p>Thank you for subscribing to our Weekly Risk Alerts. <br />
Your filled subscription form has been received and is pending approval.<br />
You will receive login instructions upon approval of your account.</p>
</div>
</div>";
}
}
}
?>
