I'm trying to connect an input tag, type image to an ajax function that will run a php script. I've been having trouble getting anything to happen when I click the image button, so I have tripped everything out, but the alert.

Can someone take a look and let me know what I'm doing wrong? Following the current page code I'm including the whole ajax function to show what i'm trying to get to.



Code:
<!DOCTYPE html>
<html>

<head>
	<title> Auditions</title>
	<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script>
		
$(document).ready(function() {

	$('.audition_btn').click(function() {
		alert($(this).attr("name")); // will give you the name of the clicked element

	}

}); // end ready

</script>

</head>
<body>



<div id='auditionForRole'>
	
<div id='open_roles'>
		<!-- role 1 -->
	<div class='role_box'>
		
		<img src='img/users/missing_225x300.png'>
			
		<div class='role_info'>
			<h3>Actress</h3>
			<h4>Mossad officer Ziva David</h4>
			<h4>A native of Israel, Ziva...</h4>
		</div> <!-- close role info -->
		<input type='image' class='audition_btn' name='audition_btn'  id='audition_btn' 
					src='img/audition_btns/audition_btn.png'>

	</div> <!-- close role1 -->
		
		<!-- role 2 -->
	<div class='role_box'>
		
		<img src='img/users/missing_225x300.png'>
			
		<div class='role_info'>
			<h3>Actress</h3>
			<h4>Mossad officer Ziva David</h4>
			<h4>A native of Israel, Ziva...</h4>
		</div> <!-- close role info -->
		<input type='image' class='audition_btn' src='img/audition_btns/audition_btn.png' name='audition_btn2'  id='			audition_btn2' >

	</div> <!-- close role2 -->

		<!-- role 3 -->
	<div class='role_box'>
		
		<img src='img/users/missing_225x300.png'>
			
		<div class='role_info'>			<h3>Actress</h3>
			<h4>Mossad officer Ziva David</h4>
			<h4>A native of Israel, Ziva...</h4>
		</div> <!-- close role info -->
		<input type='image' class='audition_btn' src='img/audition_btns/audition_btn.png' name='audition_btn3'  id='			audition_btn3' >

	</div> <!-- close role3 -->
	
</div> <!-- close open roles -->
</div> <!-- close auditionForRole -->
</body>
I'm trying to get this function(located in the head section) to run a php script when one of the buttons (input type='image') are clicked. The buttons are generated with php so it will need to figure out which button has been clicked.
Code:
<script>
		
		$(document).ready(function() {
			
			$('.audition_btn').click(function() {
				var buttonNumber = $(this).attr("name"); 

				$.ajax({
				    type: "POST",
		    		    url: "process.php?proj_id="+<?php echo $proj_id ?>,
		    		    data: buttonNumber,
				    
                                    success: function(){
				    	alert('You have auditioned for this project');
				    } // end of success function
                                  }); // end of ajax
			
			}); // end audition_btn.click
		}); // end document).ready
</script>