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.

It would be better to use ajax for this type of stuff. It will be annoying for the user if he wants to click on 10 seats and have to submit the page 10 times. — enenen
– enenen, Commented Nov 6, 2012 at 10:46
why you are looping two times? where is the query of first loop? — Awais Qarni
– Awais Qarni, Commented Nov 6, 2012 at 10:48

enenen · Accepted Answer · 2012-11-06 12:14:37Z

3

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.

edited Nov 6, 2012 at 12:14

answered Nov 6, 2012 at 10:55

enenen

1,9772 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nupac Over a year ago

Thank you so much, took a while for me to understand the code but later better than never right? Thank you so much again.

Sohail Ahmed · Accepted Answer · 2012-11-06 10:55:10Z

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

Sentencio · Accepted Answer · 2012-11-06 10:45:34Z

1

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

answered Nov 6, 2012 at 10:45

Sentencio

2301 silver badge13 bronze badges

Comments

loler · Accepted Answer · 2012-11-06 10:55:35Z

1

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

edited Nov 6, 2012 at 10:55

answered Nov 6, 2012 at 10:49

loler

2,5971 gold badge21 silver badges31 bronze badges

Comments

Awais Qarni · Accepted Answer · 2012-11-06 11:29:08Z

0

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 . :-)

edited Nov 6, 2012 at 11:29

answered Nov 6, 2012 at 10:56

Awais Qarni

18k25 gold badges80 silver badges145 bronze badges

1 Comment

nupac Over a year ago

Thank you so much for your help. I used a combination of yours and a method posted above. Thank you so much again

Collectives™ on Stack Overflow

send data on button click from javascript to database

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related