send data on button click from javascript to database

Question

So I have a php page that gets data from database and displays a table. Each td symbolises a seat in a movie theater. What i want to do is when a user clicks on one or more tds, and clicks send, the status column for each td in the database changes to 1 from 0(default). When the database is accessed next time, the td's with status=1 have a different color. My code upto now is:

    <div id="screen">SCREEN</div>
<div id="Seatings">
    <?php echo "<table border='1'>
        <tr>
        <th>Seating</th>
        </tr>";
        $count=0;
    echo "<tr>";
    echo"<td id='Seat_rn'>A</td>";
    while($row = mysql_fetch_array($sql))
    {

        if($count<10){
        echo "<td id='Seat_A' class='count'>" . $row['Seat'] . "</td>";  
        }
    $count++;
    }   
    echo "</tr>";
   $sql=mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
   echo "<tr>";
   echo"<td id='Seat_rn'>B</td>";
   while($row = mysql_fetch_array($sql))
   {
      if($count>=10){
       echo "<td id='Seat_B' class='count'>" . $row['Seat'] . "</td>";  
      }
   $count++;
   }
   echo"</tr>";
   echo "</table>";
   ?>
</div>
<input type="button" value="Done" name="done" onclick="window.close()"> 

My jquery code is:

        $("td #Seat_A").click(function(){
    $(this).css("background", "red");
        });
        $("td #Seat_B").click(function(){
    $(this).css("background", "red");
        });
        $(document."done").click(function(){
    alert(price:750 Baht);
        }) 

I am nowhere near what i want and I'm sorry if any of my code is "amatuer-ish" but I am new to this and I have been trying very hard. Would appreciate any help that I can get.

Answer 1

First of all you have to add an ID to every TD on your table, i.e. Seat ID, For example:

echo "<td id='Seat_A' data-seat='". $row['id'] ."'class='count'>" . $row['Seat'] . "</td>";

Then send this ID to your PHP script with Ajax:

$("td #Seat_A").click(function(){
    var seat_number = $(this).data("seat");

    $.ajax({
        type: 'POST',
        url: "/take_a_seat.php",
        data: 'seat_number='+seat_number,
        success: function(data){
            $(this).css("background", "red");
        }
        dataType: "json"
    });
});

On the PHP script you have to do what you want to the seat with this ID and return true or false as a result. Let's suppose you have a field named reserved in your database table. You can get the unique ID and update that row to reserved = 1 for example.

Answer 2

Try this easy to use ajax script to accomplish your task

Features: you can show an gif img before send data to db in beforeSend section
get response from php file in success section
hide img after data inset in db in complete section and show successful or not success msg

var myVar = 'your desire data you want to send to db';
$.ajax({           
            type: "POST",  
            url:"scripts/dummy.php",  
            data:"myVar="+myVar,

            beforeSend: function()
            {                   

            },
            success: function(resp)
            {               

            }, 

            complete: function()
            {

            },

            error: function(e)
            {  
            alert('Error: ' + e);  
            }  

    }); //end Ajax

Answer 3

Javascript is client side. Your database is server side.. So you have to use php to change your database entries.

Answer 4

In short, if you want to execute PHP stuff without reloading page, than use AJAX. You can use it with your favorite JQuery.

Answer 5

This is an overview. For existing records you should some thing like this

  <?php
  $count=1;
  $res = mysql_query("SELECT * FROM Seating_para_20 Where Seat > '10'");
  while($row = mysql_fetch_array($sql)) {

    if($row['status']==1) {
      $tdcolor = 'red';
    } else {
       $tdcolor = 'blue';

    }
    ?>

    <td id="td-<?php echo $count;?>" sytle="background-color:<?php echo $tdcolor; ?>" onclick="reserveseat(<?php echo $count; ?>);" >
    <?php
    $count++;
  }
  ?>

For changing after page load you will do ajax operation

 <script type="text/javascript" language="javascript">
 function reserveseat(count) {
   $.ajax({
    type: 'POST',
    url: "bookseat.php",
    data: '',
    success: function(data){
        $("#td-"+count).css("background-color", "red");
    }

   });
 }

 </script>

In bookseat.php you will change the status ... :-) Read about ajax from here . :-)