Pass javascript variable value to a php file when javascript function is called

Question

I have a javascript function which runs when a script button is clicked,

//script function    
oyCrosswordFooter.prototype.update = function(){    
        var  buf = "";

        if (!this.puzz.started){
            buf += "Game has not yet started!";
        } else {
            buf += this.puzz.menu.score ;   //this is the value I want to pass to a php file    
            if(this.puzz.menu.rank != -1){
                buf += this.puzz.menu.rank;         
            }
        }

        document.getElementById("oygFooterStatus").innerHTML = buf; 
    } 

I want to pass value of the 'buf' to another php file(let's say a.php) since I need to store it in a database when the button is clicked. Can anyone please tell me how to do this? If anyone can please post the complete answer since I am new to javascript.
Note that above function is in a .js file(file format is .js)

Answer 1

You need to use Ajax, there is lots of information on Ajax on Google, but I'll provide some helper code:

oyCrosswordFooter.prototype.update = function(){    
    var  buf = "";

    if (!this.puzz.started){
        buf += "Game has not yet started!";
    } else {
        buf += this.puzz.menu.score ;   //this is the value I want to pass to a php file    

        if(this.puzz.menu.rank != -1){
            buf += this.puzz.menu.rank;         
        }
    }

    var ajax;
    if(XMLHttpRequest)
        ajax = new XMLHttpRequest();
    else
        ajax = new ActiveXObject("Microsoft.XMLHTTP");

    ajax.onreadystatechange = function(){
        if(ajax.readyState==4 && ajax.status==200){
            alert('buf was sent to the server');
        }
    }

    ajax.open('GET', 'getbuf.php?buf='+encodeURIComponent(buf), true);
    ajax.send();

    document.getElementById("oygFooterStatus").innerHTML = buf; 
} enter code here

That script sends buf to the server through GET to the script getbuf.php. So it will be available in the php $_GET array. Sanitize it carefully before inserting it into a database though.

You may also want to look into using a JS library like jQuery. It simplifies a lot of Javascript, for example, all the code I added could be replace by:

$.get('getbuf.php', {buf: buf}, function(){
    alert('buf was sent to the server');
});

Answer 2

Not knowing javascript shouldn't be too much of a problem for this. Get jQuery ready and make a post like so:

$.ajax({
  type: 'POST',
  url: '/a.php',
  data: buf,
  success: success,
  dataType: dataType
});