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">&times;</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>&nbsp;&nbsp;
                        <?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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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?