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:
           <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">&times;</span></button>
                    <h4 class="modal-title h2"><strong>Your Claim Information Has Been Submitted</strong></h4>
                  <div class="modal-body">
                    <p>modal text</p>
                  <div class="modal-footer">
                </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 class="col-sm-4 info-board info-board-red">
                    	<h4>Insurance Information</h4>
                        <!-- insurance info here -->
                    <div class="col-sm-4 info-board info-board-red">
                    	<h4>Vehicle Information</h4>
                    	<!-- vehicle info here -->
                <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>&nbsp;&nbsp;
                                $a = rand(1, 10);
                                $b = rand(1, 10);
                                echo $a." + ".$b." = ?";
                            <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 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset1" value="Reset Form" tabindex="28" class="btn btn-red" />
          				<div id="response"></div>
 <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>
$(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
		// 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();	
function submitForm(formData) {
		type:			'POST',
		url:			'../agents/php/feedback_custom.php',
		data:			formData,
		dataType:	'json',
		cache:		false,
		timeout:	7000,
		function(data) {
		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>' +
and the php:
PHP Code:
//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>";
            else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem sending the email. Please try again.</h4>";    


else {
$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem with your submission. Please try again.</h4>";    
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?