how to enable/disable form radio-button based on table entry with Ajax?

[dave_irishman]

I have a table residing on a MySql data base called Bookings.
The Bookings table consists of a composite primary key based upon the following 2 fields: BookingDate & Booking Slot.

On my website, I have built a bookings page which will consist of a a simple HTML Form, which has a Date Field and a Radio-Button group which has 3 different time slots (eg: 9am, 2pm and 4pm). Firstly, the User will select a Date they would wish to place a booking on and then click a submit button called "Check Availablity". Once this button is clicked, Ideally, I would like a script to check an see what free slots are available for that Date and then disable the radio buttons related the slots which are already booked.

Here is a simple scenario to help explain the functionality i am trying to implement :

The User comes to the Bookings page, and selects the Date 14/03/2011. Then clicks the "Check Availablity" button. In this scenario, the 9am slot is already booked for this date (eg: this booking already exists on the MySql database table), so the 9am radio button on the page is then disabled, not allowing the user to try an attempt to book this timeslot on this date.

Below is the a simplified version of the php script which I wrote to implement the this functionality.

<?php
function checkSlot()
{

// Get data 
$test_date = $_GET["bookingDate"]; 

// Database connection 
$conn = mysqli_connect("localhost","root","","wordpress"); 
if(!$conn) { 
    die('Problem in database connection: ' . mysql_error()); 
} 

// Attempt to find Duplicate Primary Keys

$query = "SELECT Count(*) AS 'total' FROM Bookings WHERE booking_date ='{$booking_date}' AND booking_slot = '9am'";

$result = mysqli_query($conn, $query) or die(mysqli_error($conn)); 

$num = $result->fetch_assoc(); 

  If ($num['total'] == 0) 
  {             
    //echo "<script> document.getElementById('9amTimeSlotRadioButton').disabled  = false; </script>";       

  }
  else if($num['total'] > 0)
  {         
    //echo "<script> document.getElementById('9amTimeSlotRadioButton').disabled  = true; </script>";            
  }       
}
?>

My problem is that I cant get the Javascript line within the if statement to execute and disable/enable the related 9am radio button.

Upon research into this, I have recently found out that it is not possible to do this with just Php and JavaScript, as php runs serverside and javascript runs client-side and Ajax would be needed here.

How to implement this functionality by using Ajax?

I have zero experience in the language so I really dont know where to start.

Yes you could use jquery. Although the check availabily button could just do a form submit. You might be able to get away with it but I'm not too sure.

Lastly,remember always validate your input server side. You can make restrictions client side however, there is no guarantee... your user might turn of javascript or edit the html before submitting.

E.g if you grey out the 9.00am slot the user could quite easily edit the HTML to select that slot and submit. ALWAYS validate server side before submitting to your db.

[Alberto Bucur]

First put your php function in a separate file, lets named checkSlot.php
Change this code like this:

<?php
    // Get data
    $test_date = $_GET["bookingDate"];
    // Database connection
    $conn = mysqli_connect("localhost","root","","wordpress");
    if(!$conn) {
    die('Problem in database connection: ' . mysql_error());
    }
    // Attempt to find Duplicate Primary Keys
    $query = "SELECT Count(*) AS 'total' FROM Bookings WHERE booking_date ='{$booking_date}' AND booking_slot = '9am'";
    $result = mysqli_query($conn, $query) or die(mysqli_error($conn));
    $num = $result->fetch_assoc();
    If ($num['total'] == 0)
    {
        echo 0;
    }
    else if($num['total'] > 0)
    {
        echo 1;
    }

 ?>

In javascript you can write something like this:

//This function create a ajax object
function getxmlhttp()
{
    if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    else {
    // code for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

//This function must be called from your page
function checkSlot()
{
    var ajax = getxmlhttp();
    ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) 
        {
            var x = ajax.responseText;
            if(x == 1)
            { 
          document.getElementById('9amTimeSlotRadioButton').disabled  = true;
            }
            else
            {                        document.getElementById('9amTimeSlotRadioButton').disabled  = false;}
            }
    }
    ajax.open("GET", "includes/mesagerie.php?bookingDate="+bookingDate, true);
    ajax.send();   
}

[dave_irishman]

Thank you very much for your help on this guys, I'm hoping to sit down over the weekend and get this implemented. Will keep u updated on my progress! :)