如果选择，则在db中存储值

时间：2014-01-02 04:12:49

标签： javascript php html

问题已更新感谢您的帮助此代码工作正常但当我点击确认选择时，预订的计数应该在数据库中增加，如果用户选择预订的img它应该显示房间已预订，请你帮忙.. 

<?php
mysql_connect("localhost","root","");
mysql_select_db("hotel");
error_reporting(E_ALL ^ E_NOTICE);
$notify = "";
$sql = "SELECT * FROM room";
$getquery = mysql_query($sql);
$submit=$_POST['submit'];
if($submit)
{
if($booked)
{
    $insert=mysql_query("INSERT INTO room (booked) VALUES ('$taken')");
    echo $insert;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org   /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>sample</title>
    <script type="text/javascript">
        numPremSeatsPerRow = 6;
        PremRowNames = ['A','B','C','D'];
        numCheapSeatsPerRow = 10;
        CheapRowNames = ['E','F','G','H','I'];
        statusPics = new Array();
        statusPics['avail'] = new Image();
        statusPics['mine'] = new Image();
        statusPics['taken'] = new Image();
        statusPics['vacate'] = new Image();
        statusPics['avail'].src = 'blue.jpg';
        statusPics['mine'].src = 'green.jpg';
        statusPics['taken'].src = 'red.jpg';
        statusPics['vacate'].src = 'blue1.jpg';
        function createSeats(oSeatsContainer,seatsPerRow,rowNames){
            var oRow = document.createElement('tr');
            oRow.appendChild(document.createElement('th'));
            for(i=1; i <= seatsPerRow; i++){
                var oTh = document.createElement('th');
                oTh.appendChild(document.createTextNode(i));
                oRow.appendChild(oTh);
            }
            oSeatsContainer.appendChild(oRow); //this row contains the seat numbers
            for(i=0; i < rowNames.length; i++){
                var oRow = document.createElement('tr');
                var oCell = document.createElement('td');
                oCell.innerHTML = rowNames[i];
                oRow.appendChild(oCell);
                for(j=0; j < seatsPerRow; j++){
                    oCell = document.createElement('td');
                    var oImg = document.createElement('img');
                    oImg.src = statusPics['avail'].src;
                    oImg.status = 'avail';
                    oImg.id = rowNames[i]+(j+1);
                    oImg.onclick=function(){
 this.status = (this.status == 'avail')? 'mine' : 'avail';
 this.src = (this.status == 'avail')? statusPics['avail'].src : statusPics['mine'].src;
                        oTotalprice.innerHTML = '';
                        oBookedSeatNos.innerHTML = '';

                    }
                    oCell.appendChild(oImg);
                    oRow.appendChild(oCell);
                }
                oSeatsContainer.appendChild(oRow);
            }
        }
        function confirmChoices(){
         premSeatsSelected = new Array();
            for(i=0; i < oPremSeats.length; i++){
                if(oPremSeats[i].status == 'mine'){
                    premSeatsSelected.push(oPremSeats[i].id);
                    oPremSeats[i].src=statusPics['taken'].src
                }
                if(oPremSeats[i].status == 'taken'){
                    premSeatsSelected.push(oPremSeats[i].id);
                    oPremSeats[i].src=statusPics['vacate'].src
                }
            }
            cheapSeatsSelected = new Array;
            for(i=0; i < oCheapSeats.length; i++){
                if(oCheapSeats[i].status == 'mine'){
                    cheapSeatsSelected.push(oCheapSeats[i].id);
                    oCheapSeats[i].src=statusPics['taken'].src
                }
                if(oPremSeats[i].status == 'taken'){
                    premSeatsSelected.push(oPremSeats[i].id);
                    oPremSeats[i].src=statusPics['vacate'].src
                }

            }

        }

        window.onload=function(){
            oTblPremium = document.getElementById('tblPremium');
            oTblCheap = document.getElementById('tblCheap');
            oPremSeats = oTblPremium.getElementsByTagName('img');
            oCheapSeats = oTblCheap.getElementsByTagName('img');
            oTotalprice = document.getElementById('totalprice');
            oBookedSeatNos = document.getElementById('bookedSeatNos');
       createSeats(oTblPremium,numPremSeatsPerRow,PremRowNames); //create premium seats
       createSeats(oTblCheap,numCheapSeatsPerRow,CheapRowNames); //create cheap seats
            document.getElementById('confirm').onclick=confirmChoices;
            document.getElementById('btnReset').onclick=function(){
                oTotalprice.innerHTML = '';
                oBookedSeatNos.innerHTML = '';
                for(i=0; i < oPremSeats.length; i++){
                    oPremSeats[i].src = statusPics['avail'].src;
                    oPremSeats[i].status = 'avail';
                }
                for(i=0; i < oCheapSeats.length; i++){
                    oCheapSeats[i].src = statusPics['avail'].src;
                    oCheapSeats[i].status = 'avail';
                }
            }
            document.getElementById('imgAvail').src = statusPics['avail'].src;
            document.getElementById('imgMine').src = statusPics['mine'].src;
            document.getElementById('imgTaken').src = statusPics['taken'].src;
    document.getElementById('imgvacate').src = statusPics['vacate'].src;
        }
    </script>
    <script language="javascript" type="text/javascript">
 <!-- 
 //Browser Support Code
 function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!

  try{
   // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
 }catch (e){
  // Internet Explorer Browsers
  try{
  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch (e) {
  try{
     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }catch (e){
     // Something went wrong
     alert("Your browser broke!");
     return false;
   }
 }
 }
 // Create a function that will receive data 
 // sent from the server and will update
// div section in the same page.
 ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
  var ajaxDisplay = document.getElementById('ajaxDiv');
  ajaxDisplay.innerHTML = ajaxRequest.responseText;
 }
 }
 // Now get the value from user and pass it to
 // server script.
   var age = document.getElementById('avilable').value;
   var wpm = document.getElementById('booked').value;
  var sex = document.getElementById('vacated').value;
  var queryString = "?avilable=" + avilable ;
  queryString +=  "&booked=" + wpm + "&vacated=" + sex;
  ajaxRequest.open("GET", "s2-ex.php" + 
                          queryString, true);
   ajaxRequest.send(null); 
    }
   //-->
    </script>
    <style>
    .tab{
margin-top:10px;

border-radius: 7px;
border: 2px solid #CCCCCC;


margin-bottom:20px;
}
    body { margin: auto 48px; }

</style>
</head>
<body>
<form action="s2.php" method="POST">
    <div id="header"></div>
    <div id="wrapper">
        <div id="myTickets">
            <h1>hotel Room</h1>
            <div id="myTicket">
                <h3>Your room Selection:</h3>
            </div>
            <div>
    <table>
        <thead>
            <tr>
                <tr>Total</tr>
                <tr>&nbsp;</tr>
                <tr>Avilable</tr>
                <tr>&nbsp;</tr>
                <tr>Booked</tr>
                <tr>&nbsp;</tr>
                <tr>Vacated</tr>
                <br>
            </tr>
        </thead>
        <tbody>
     <?php
     while($row = mysql_fetch_array($getquery)) {
       echo '<br>';
        echo '<tr>' . $row['total'] .'</tr>';
       echo '<tr>' . '&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'</tr>';
         echo '<tr>' . $row['avilable'] .'&nbsp;'.'&nbsp;'.'</tr>'; 
echo '<tr>' . '&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'</tr>';
echo '<tr>' . $row['booked'] .'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'</tr>';
echo '<tr>' . '&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'&nbsp;'.'</tr>';
echo '<tr>' . $row['vacated'] .'</tr>';
echo '</table>';
      }
    ?>
        </tbody>
    </table>
</div>
            <div id="key">
                <p>&nbsp;&nbsp;<img id="imgAvail" src="" alt="Available" /> = Available; <img id="imgMine" src="" alt="Mine" /> = Mine;
                    <img id="imgTaken" src="" alt="Taken" /> = Taken; <img id="imgvacate" src="" alt="vacate" /> = vacated;</p>
            </div>
        </div>
        <div id="seating">
            <h2 align="center">Raised Premium Rooms</h2>
   <table id="tblPremium" class="tab" bgcolor="#999999" cellspacing="4" align="center">     </table>
            <h2 align="center">Regular Seats Rooms</h2>
            <table id="tblCheap" class="tab" bgcolor="#999999"  align="center"></table>
            <h5></h5>
            <div style="clear:both">
            </div>
            <br />
            <div id="theButtons">
                <input type="button" value="Confirm Choices" id="confirm" />&nbsp;
                <input type="submit" name="submit" value="book">&nbsp;
                <input type="reset" id="btnReset" value="Reset" />

            </div>
        </div>
    </div>
    </form>
    </body>
     </html>

5 个答案:

答案 0 :(得分：0)

无法使用javascript连接到数据库。你必须在这个页面上使用像php或jsp这样的东西连接到db

答案 1 :(得分：0)

只使用ajax，并使用PHP存储在db

中

答案 2 :(得分：0)

  1. Connect Javascript to PHP using AJAX
  2. Connect PHP to MySQL

答案 3 :(得分：0)

首先，

您需要编写类似于<myServer.php>的文件并放在服务器上。并使其可供客户端调用访问。通常，如果您将<index.php>放入安装了php.exe并配置为运行.php文件的apache htdocs文件夹中，则对localhost的浏览器调用通常会将此解析为与php executable。

<强>其次，

您需要将PHP代码放入您的客户端代码（上面粘贴的代码）中，类似于此... 

<?php
// Create connection
$con=mysqli_connect("localhost","your username to mysql","password for it","your mysql db instance name");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  } else {
 // execute the queries you intend DDL or DML statements
  }
?>

注意此过程至少需要一天时间才能完成调试并使一切正常。

答案 4 :(得分：0)

您可以使用Jquery Ajax发送并获取响应。

$.ajax({
        type:'POST',
        url: 'confirm.php',
        data: "really=yes&sure=yes",
        success:function(data){
                //Need to split data here
        }
    });

然后使用响应（在JSON中）来做一些规则。

相关问题
最新问题