I am relatively new to web design and have a problem with an Account Creation 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. The problem is I receive the Account Creation Form email twice and also the dialogue box alert pop's-up twice. The CSS3 used is correct but I cannot see what is causing the submit function to occur twice instead of only once. Any help would be greatly appreciated! Thank you! Narelle!
*------------------------------------*
HTML5 Code
*------------------------------------*
<form id="process_account_registration" action="process_account_registration.php" method="post" data-validate="parsley">
<div class="control-group">
<label class="control-label" for="inputEmail">Email Address:</label>
<div class="controls">
<input class="span12" style="color: #FF4000;" type="text" id="inputEmail" name="inputEmail" placeholder="Your_Email@email.com" data-trigger="change" data-required="true" data-type="email">
</div>
<div id="emailAlreadyUsedNotice" class="emailError hidden">This email is already in used!</div>
<small>You will shortly receive a verification email to verify your email account</small>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password:</label>
<div class="controls">
<input class="span12" style="color: #FF4000;" type="password" id="inputPassword" name="inputPassword" placeholder="Min 6 characters - Max 20 characters" maxlength="20" data-trigger="change" data-required="true" data-minlength="6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword2">Confirm Password:</label>
<div class="controls">
<input class="span12" style="color: #FF4000;" type="password" id="inputPassword2" name="inputPassword2" placeholder="Same as Password above" maxlength="20" data-trigger="change" data-required="true" data-minlength="6" data-equalto="#inputPassword">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputIDCode">ID Code:</label>
<div class="controls">
<input class="span12" style="color: #FF4000;" type="text" id="inputIDCode" name="inputIDCode" placeholder="XXXXXX" maxlength="11" data-trigger="change" data-required="true" data-minlength="11">
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="row-fluid">
<div class="span6">
<button class="btn btn-primary btn-loading span12" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Creating Account ..." type="submit"><i class="fa fa-dashboard fa-lg"></i> Create Account</button>
</div>
<div class="sentMsg span6 hide">
<h6>
<i class="fa fa-check-circle-o fa-lg"></i>
<span>Thank you!<br />We have received your Registration Account Details!</span>
</h6>
</div>
<div class="span6 mtm">
<p>By signing up, you agree to the <br><a href="terms_and_conditions.html" target="blank">Terms & Conditions</a> & <a href="privacy_policy.html" target="blank">Privacy Policy</a></p>
</div>
</div>
</div>
</div>
</form>
*------------------------------------*
PHP Code - process_contact_form.php
*------------------------------------*
<?php
if( isset($_POST) ){
//form validation vars
$formok = true;
$errors = array();
//sumbission data
$ipaddress = $_SERVER['REMOTE_ADDR'];
$date = date('d/m/Y');
$time = date('H:i:s');
//form data
$email = $_POST['inputEmail'];
$pwd1 = $_POST['inputPassword'];
$pwd2 = $_POST['inputPassword2'];
$idcode = $_POST['inputIDCode'];
//validate form data
//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 Password 1 is not empty
if(empty($pwd1)){
$formok = false;
$errors[] = "You have not entered your password";
}
//validate Password 2 is not empty
if(empty($pwd2)){
$formok = false;
$errors[] = "You have not confirmed your password";
}
//validate Password 1 equals Password 2
if($pwd1 != $pwd2){
$formok = false;
$errors[] = "Your Password and Confirmation Password do not match";
}
//validate ID Code is not empty
if(empty($idcode)){
$formok = false;
$errors[] = "You have not entered your ID Code";
}
//send email if all is ok
if($formok){
$headers = "From: email@email.com" . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$emailbody = "<p>You have recieved a new Management Account Registration request from the web site.</p>
<p><strong>Email Address: </strong> {$email} </p>
<p><strong>Password: </strong> {$pwd1} </p>
<p><strong>Confirmed Password: </strong> {$pwd2} </p>
<p><strong>ID Code: </strong> {$idcode} </p>
<p>This message was sent from IP Address: {$ipaddress} on {$date} at {$time}</p>";
mail("email@email.com","New Enquiry",$emailbody,$headers);
}
}
?>
*------------------------------------*
jQuery Code - process_contact_form.php
*------------------------------------*
$(document).ready(function() {
/*===== button loading status =====*/
$("form").submit(function(e){
e.preventDefault();
contactConfirm();
});
$('.btn-loading').on('click', function() {
contactConfirm();
});
});
var form_success_response = "Thank you, we aknowledge your Account Registration request. You will shortly receive an email requesting you to confirm your Email Account!";
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(form_success_response);
$('.btn-loading').button('reset');
$("#process_account_registration").trigger('reset');
}
});
}
}