SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with connecting input tag to javascript function

    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>

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually got the button to start working with code below. Now i'm trying to figure out how to return data back to the success function inside of the ajax call.


    Code:
    $(document).ready(function() {
    
    	$('.audition_btn').click(function() {
    		var buttonNumber = $(this).attr("name"); // to figure out which button was clicked		
    		alert(buttonNumber); // just for testing
    		$.ajax({
    		    type: "POST",
        		url: "scripts/process_audition.php?proj_id="+<?php echo $requested_proj_id ?>,
        		data: buttonNumber,
    		    success: function(){
    		    	alert('You have auditioned for this project');
    		    }
    		}); // end of ajax
    
    	}); // end click
    
    }); // end ready

    for some reason the query is not running. It works if I drop the same query into mysql workbench.
    How do I sent back an error message that will display inside of the alert box.
    php
    Code:
    <?php
    require_once 'scripts/app_config.php';
    require_once 'scripts/database_connection.php';
    require_once 'inc/db.php';
    
    $proj_id = $_REQUEST['proj_id'];
    $user_id = 1; // hardcode user_id for now
    $audition_id = $_POST['buttonNumber']
    
    $query = 'update jobs set job_user_id = 1 where job_id= 1';
    $result = mysql_query($query);
    if (!$result)
    {
    	die(mysql_error());
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •