Updating a variable after checking a checkbox

[gevensen]

I am new to ajax

 

I found a great example here in phpfreaks on using a checkbox to update mysql

 

and i have made it work where when i click the checkbox it updates mysql

 

my question is how do I update the variable $allocating in the table which consists of the sum of all boxes checked?

 

the variable i want to update

 

<tr>
<td align = "center" ></td>
<td align = "center" ></td>
<td align = "center" ></td>
<td align = "right" >Allocating-></td>
<td align = "center" ><?php echo $allocating;?></td>
<td align = "center" ></td>
</tr>

 

the checkbox in the table

 

<td align = "center" ><input name="chk" type="checkbox" id="chk_<?php echo $id; ?>" value="<?php echo $id; ?>" onclick="chkit(<?php echo $id; ?>, this.checked);" /><td>

 

The ajax call

 

<script type="text/javascript">
function chkit(uid, chk) {
   chk = (chk==true ? "1" : "0");
   var url = "de5f4c3a398ba57f47fcb38ecbba0589.php?id="+uid+"&chkYesNo="+chk;
   if(window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   // Use get instead of post.
   req.open("GET", url, true);
   req.send(null);
}
</script>

 

the php part of the ajax call

 

<?php session_start();?>
<?php require_once("../../sc/f419da52ec05f1bc45119e74f4d466fe/config.php"); ?>
<?php 
mysql_connect($servername, $dbusername, $dbpassword) or die(mysql_error());
$dbname=$_SESSION['db'];
mysql_select_db($dbname) or die(mysql_error());
$id = $_GET['id'];
$chkYesNo = $_GET['chkYesNo'];
$sql = "
UPDATE sc_allocated_funds
SET chk ='$chkYesNo'
WHERE id = '$id'
";
mysql_query($sql) or die(mysql_error());
?>

 

the numbers i would want would be the sum(amount) from the table sc_allocated_funds

[gevensen]

Ok for those who have not found answers to this as I have not found any answers let me share this which I found yesterday from someone named nikoloff

 

http://javascripthowtos.blogspot.com/2009/02/ajax-requests-class.html

 

This routine will allow you to call multiple ajax calls simply

 

also for those who are new to ajax as I am, if you want to display a ajax result from a database ( ie for example a total or name ect ect ) at the end of the php file you have written echo the output and it will show in the specified element or div

 

I did make a minor modification to the script which allowed me to flag the this.obj.open('GET', this.url, this.flag ); ( instead of this.obj.open('GET', this.url, true ); ) so i can toggle the true and false because when updating my final number i found i was clicking too fast and it wasnt updating properly so i changed the flag to false ( which makes it wait until completion ) and it solved my issue

 

hats off to nikoloff heres the updated code

 

<script type="text/javascript">

// this if my fucntion to call the ajax for function 1

function chkit(uid, chk ) {

  chk = (chk==true ? "1" : "0");

  var url = "de5f4c3a398ba57f47fcb38ecbba0589.php?id="+uid+"&chkYesNo="+chk;

  new ajaxObj(url, 'chkform', 'Working...', false);

}

 

 

// this if my fucntion to call the ajax for function 2

// testing the ajax call

function updateTotal() {

var url2 = "de6f4c3a398ba57f47fcb38ecbba0589.php";

new ajaxObj(url2, 'test', 'Working...', true);

 

 

}

 

 

//The parameters passed to the function are as fallows:

//url - the url of the script that we wanna request. You can use either full or relative to your server urls.

//elmnts - this is either the id of the element that will contain the response from our request, or can also be a whole array of elements

//loadingMsg - if this parameter is set, after the request has been send, the content of the changed element(s) will be set to whatever this variable is set, i.e. "Loading! Please wait...".

function ajaxObj(url, elmnts, loadingMsg, flag)

{

this.obj = new Object();

 

this.url = url;

this.flag = flag;

this.loadInto = elmnts;

 

if(loadingMsg) //if we have set a loading message here it will be put into the changed elemnt(s)

{

if(typeof(this.loadInto) != 'object') //if we wanna change just one element, simply do it using it's id

    document.getElementById(this.loadInto).innerHTML.innerHTML = loadingMsg;

  else //or if the 'elmnts' parameter is an array - change all the elements of the array

    {

    for(i in this.loadInto)

    {

      document.getElementById(this.loadInto).innerHTML = loadingMsg;

    }

    }

}

 

//This prototype is used to create our request, send it and handle it

this.init();

}

 

//This function tries if different objects are available, untill it finds one that works, cause all the major browsers use different techniques to send the request

ajaxObj.prototype.create = function()

{

try

  {

    xmlHttp = new XMLHttpRequest();

  }

  catch(e)

  {

    try

    {

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

    }

    catch(e)

    {

    try

      {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

      }

    catch(e)

      {

      return false;

      }

  }

  }

 

this.obj = xmlHttp;

}

 

//Now that we have the request object, we need to make sure it will be handled properly before sending it:

 

ajaxObj.prototype.handle = function()

{

var o = this.obj;

var into = this.loadInto;

 

o.onreadystatechange = function() //Set an event handler that is triggered everytime the readystate of the object has changed

  {

    if(o.readyState == 4) //If the readyState is 4, the request has been completed - we can proceed with using the response

      {

      if(typeof(into) != 'object') //if we want to change just one element - set it's innerHTML equal to the response

        document.getElementById(into).innerHTML = o.responseText;

      else //otherwise - we have more than one elements to change. We must first split the data that is returned into parts for each one of the elements and then update them

      {

        temp = o.responseText.split("@@");

       

        for(i in into)

        {

        document.getElementById(into).innerHTML = temp;

        }

      }

      }

}

}

 

 

//This prototype simply sends the request to the desired url

ajaxObj.prototype.send = function()

{

  this.obj.open('GET', this.url, this.flag );

  this.obj.send(null);

}

//This prototype calls all the other ones in the proper order. It's not really necessary, cause we can just call

//this prototypes from within the object constructor, but I use it, cause I'm planning to extend this object in the future.

ajaxObj.prototype.init = function()

{

this.obj = null;

 

this.create();

 

this.handle();

 

this.send();

}

 

 

 

</script>

 

 

// mys html call

 

<td align = "center" ><input name="chk" type="checkbox" id="chkform" value="<?php echo $id; ?>" onclick="chkit(<?php echo $id; ?>, this.checked); updateTotal();" />