Update database info with onclick button

Question

I need some help with a button onClick.

<button type="button" id="1" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 
<button type="button" id="2" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 
<button type="button" id="3" onclick="this.disabled=true; ^FUNCTION TO UPDATE^"> 

With this code I disable the button that was pressed, but I also need to update info in a database sending the id, something like this:

UPDATE reservation SET status='approved' WHERE id=^ID OF THE CLICKED BUTTON^

I need it to be loaded in the same page without sending it with POST or GET.

Answer 1

With plain javascript you can do something like this:

<script type="text/javascript">
<!--
var page = "dbupdate.php"; // hardcode this elsewhere out of sight

function update(target,data){
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
       req.onreadystatechange = function() {ajaxDone(target);};
       req.open("POST", page, true);
       req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       req.send("data=" + data );
   // IE/Windows ActiveX version
  } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
           req.onreadystatechange = function() {ajaxDone(target);};
           req.open("POST", page, true);
           req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           req.send("data=" + data );

       }
   }
}  

function ajaxDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200 || req.status == 304) {
           results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
           document.getElementById(target).innerHTML="ajax error:\n" +
            req.statusText;
        }
    }
}
// -->
</script>

For output make sure you have a div with the id equal to target.

Answer 2

Use ajax call for this eg:

$.get('update_reservation.php', {id: 1});

see http://api.jquery.com/jQuery.get/ for more info.