Show a Modal When Form Submits
Hello all,
I have a contact form i'm working on and i'd like a modal to be displayed when the form is submitted successfully. The problem i'm having is actually getting the form to show and i think my problem is in my javascript (i'm pretty new to it).
Anyway, here's what i'm using:
HTML - (myDomain.com/agents/index.php):
HTML Code:
<html>
<head></head>
<body>
<div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg ">
<div class="modal-content alert alert-success">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title h2"><strong>Your Claim Information Has Been Submitted</strong></h4>
</div>
<div class="modal-body">
<p>modal text</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<form role="ajaxExample" method="post" action="" enctype="multipart/form-data" id="agents">
<div id="response"></div>
<div class="row">
<h2 class="h3 headline"><span>Required Fields (<span class="required">*</span>):</span></h2>
<div class="col-sm-4 info-board info-board-red">
<h4>Customer Information</h4>
<!-- customer info here -->
</div>
<div class="col-sm-4 info-board info-board-red">
<h4>Insurance Information</h4>
<!-- insurance info here -->
</div>
<div class="col-sm-4 info-board info-board-red">
<h4>Vehicle Information</h4>
<!-- vehicle info here -->
</div>
</div>
<div class="row">
<div class="col-sm-12 info-board info-board-blue">
<div class="form-group">
<label for="spamQuestion">
<span class="required">*</span> Anti-spam... Please Solve The Math Problem <span class="required">*</span>:<br>
<?php
$a = rand(1, 10);
$b = rand(1, 10);
echo $a." + ".$b." = ?";
?>
</label>
<input type="hidden" value="<?php echo $a;?>" name="value1" />
<input type="hidden" value="<?php echo $b;?>" name="value2" />
<input type="text" name="answer" value="what's the result?" onclick="this.value=''" tabindex="26" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="hidden" name="honeypot" id="honeypot" value="http://">
<input type="hidden" name="humancheck" id="humanCheck" class="clear" value="">
<button type="submit" name="submit" id="submit" tabindex="27" class="btn btn-success">Submit Claim</button> <input type="reset" name="reset1" value="Reset Form" tabindex="28" class="btn btn-red" />
<div id="response"></div>
</div>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="js/ajax_submit_custom.js"></script>
</body>
</html>
JS:
myDomain.com/agents/js/ajax_submit_custom.js)
Code:
$(document).ready(function() {
$('#agents input:submit').click(function() {
$('#agents form').attr('action', 'http://' + document.domain + '/agents/php/feedback_custom.php');
$('#agents form').submit();
});
$('form #response').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
.....
if (valid != '') {
....do stuff.....
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: '../agents/php/feedback_custom.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success:
function(data) {
$("#thankyouModal").modal('show');
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">' +
'<p>There was an <strong>ERROR SENDING THE FORM</strong><br>Please make sure you have filled out the required fields and resend the form.</p>' +
'</div>').fadeIn('fast');
}
});
};
and the php:
(myDomain.com/agents/php/feedback_custom.php)
PHP Code:
<?php
sleep(.5);
//Sanitize incoming data and store in variable
....
//mail variables
...
//send email and return a message to user
if(mail($to, $subject, $body, $headers)) {
$return['error'] = false;
$return['msg'] =
'<div class="alert alert-success">'.
"<h4>Thank you for using our form ".$sentBy ."</h4>".
"<p>We'll reply to you at ".$email." as soon as we can.</p>";
echo json_encode($return);
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem sending the email. Please try again.</h4>";
echo json_encode($return);
}
}
}
else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem with your submission. Please try again.</h4>";
echo json_encode($return);
}
?>
One thing to note is that I am receiving the email from the form, it's just that the modal isn't firing.
What am i missing?
