AJAX can't read id from echoed html form in PHP

[PHPirits]

Good Day,

 

I'm still new in using jQuery and AJAX. So I'm trying to create a script which selects a table from the database and output all records selected in it. Here's the brief flow. In my index.html I want to load a form coming from the ccu_forms.php. The id of the input fields of the forms were retrieved from the database. I used foreach loop to create forms for each id retrieved in the database. Those forms will be used to insert data into the database after clicking the save button. 

 

My problem is my AJAX script can't read id of the input fields which are retrieved from the database. If I click the save button nothing happens. I wanted AJAX to recognize those input field ids and then submit it to my db_fn01.php to insert it into my database. I tried using the PHP alone to check if my queries are working and found out that it worked. I hope you get my point cause I'm not really good at explaining. Thanks to those who will help.   

 

Below are the codes I used. 

 

index.html

<script src="api/jquery-2.0.3.js" type="text/javascript"></script>
<script src="api/scripts_fn.js" type="text/javascript"></script>
<form name='games' id='games' method='POST' action='api/db_fn01.php'> <div id="ccufield"> <!-- THIS IS WHERE THE GENERATED FORMS APPEAR --> </div> <button type="submit" name="save" id="save">Save</button> </form>
<div id="myspan"></div>

 

scripts_fn.js

showCCUFields();

$(document).ready(function(){
	$("#save").click(
		function(){
			var data = $("#games :input").serializeArray();
			$.post($("#games").attr("action"), data,
			function(info){ 
				$("#myspan").show().html(info).delay(3000).fadeOut();
			});	
		clearInputs();	
		});
	$("#games").submit( 
		function(){
			return false;
		});
});

function showFields(){
	$(document).ready(function(){
		$("#ccufield").show().load("api/ccu_form.php");
	});
}

ccu_form.php

<?php
require_once("db_conf.php");

showCCUFields();

function showCCUFields(){
	try{
		$dbh = databaseConnection();
		$query = "SELECT * FROM games";
		$stmt = $dbh->prepare($query);
		$stmt->execute();
		$ret = $stmt->fetchAll(PDO::FETCH_ASSOC);
		
		$count = $stmt->rowCount();
		//echo "Rows retrieved: " . $count;
		
		if($count >= "1"){
			//echo "<form name='games' id='games' method='POST' action='api/db_fn01.php'>";
			echo "<table>";
			echo "<th>" . "GAMES" . "</th>";
			foreach($ret as $array=>$value){
				echo "<tr>";
				echo "<td>" . $value['games_name'] . "</td>";
				echo "<td>" . "<input type='text' name='" .$value['games_name']. "' id='". $value['games_id'] ."'/>" . "</td>";
				echo "</tr>";
			}
			echo "</table>";
			$dbh = null;
		}
		else{
			echo "<b style='color: red;'>" . "No Games Found!" . "</b>";
		}
		
	}
	catch(PDOException $err){
		echo "ERROR:" . $err->getMessage();
	}
}

?>

db_fn01.php

require_once("db_conf.php");

if(isset($_POST['save'])){
	add_ccu_data();
}

function add_ccu_data(){	
	$getDate = date("mdy");
	$getTime = date("H");

	$selgameID = "SELECT * FROM games";
	//retrieve this from database/games table
	
	try{
		$dbh = databaseConnection();
		$stmt = $dbh->prepare($selgameID);
		$stmt->execute();
		$retID = $stmt->fetchAll(PDO::FETCH_ASSOC);
		
		foreach($retID as $rows=>$retrieved){
			$getName = $retrieved['games_name'];
			$games_name = $_POST[$getName];
			$insCCU = "INSERT INTO ccu_data (ccu_entry_no, games_id, ccu_date, ccu_time, ccu_amount) VALUES (?, ?, ?, ?, ?)";
			$stmt = $dbh->prepare($insCCU);
			
			$stmt->bindValue('1', "", PDO::PARAM_INT);
			$stmt->bindValue('2', $retrieved['games_id'], PDO::PARAM_INT);
			$stmt->bindValue('3', $getDate, PDO::PARAM_STR);
			$stmt->bindValue('4', $getTime, PDO::PARAM_STR);
			$stmt->bindValue('5', $games_name, PDO::PARAM_INT);
			
			$stmt->execute();
				
		}
		$dbh = null;
		echo "Successfully Saved!";
	}
	catch(PDOException $err){
		echo "ERROR: " . $err->getMessage();
	}
}

Edited August 4, 2013 by PHPirits

[PHPirits]

UPDATE: I  removed the if(isset($_POST['save'])) on my db_fn01.php and it worked. Lol. Now my problem is how can my php know if the save button is pressed so it will only call the function once the button is clicked. And I would like you to suggest me in improving this script. Thanks.

[darkfreaks]

Load & Save Ajax