复选框颜色基于mySQL

时间:2017-03-01 07:49:47

标签: javascript php jquery html mysql

编码非常新,并且在过去几周内必须构建预订应用。如果座位已经预订,我正试图取回结果:

     
  1. 防止再次预订座位(错误消息)
  2.  
  3. 将复选框颜色更改为红色
  4. 我选择使用复选框但是如果你有一个漂亮的数组或表我可以使用我可以接受建议。如果预订,座位应为红色,如果当前活动用户预订,则为绿色;如果未预订,则为白色。

    目前流量为seat.html - > cart.php - > reserve.php(顺序不同,我主要需要有关reserve.php和seat.html的帮助。

    感谢您花时间阅读本文。

    - reserve.php -

    <?php session_start();
    include 'dbh.php';
    $seat = $_GET['seat'];
    $id = $_SESSION['id'];  
    
    //this was supposed to check for seats already booked but I couldn't get it to work :[ 
    
    $checkseat = "SELECT * FROM reservations WHERE seat = '$_GET[seat]'";
    $rs = mysqli_query($connection,$checkseat);
    $data = mysqli_fetch_row($rs);
    
    if($data[0] > 1) {
        echo "Seat is already reserved<br/>";
    }
    
    else
    {
        $newSeat="INSERT INTO reservations (id, seat)
            VALUES ('$id','$seat')";
    
        if (mysqli_query($connection,$newSeat))
        {
            echo "$seat is booked for user: $id";
    
        }
        else
        {
            echo "Error: Seat already booked.<br/>";
        }
    }
    

    - seats.html -

    <?php session_start(); include 'dbh.php'; $seat=$ _GET[ 'seat']; ?>
    
        <!DOCTYPE html>
        <html lang="en">
    
        <head>
            <title>Select Seats</title>
    
        </head>
    
        <body>
    
            <div id="mycounter2"></div>
            <!--script for timer on page load-->
            <script>
                i = 60;
    
                function onTimer2() {
                    document.getElementById('mycounter2').innerHTML = i;
                    i--;
    
                    onclick = function() {
                        i = 60;
                    }
    
                    if (i < 0) {
                        alert('Your seat selection has been reset.');
                        window.location.reload();
                    } else {
                        setTimeout(onTimer2, 1000);
                    }
                }
                window.onload = onTimer2;
            </script> seconds until seats are cleared.
            <br />
            <br />
    
            <style type="text/css">
                .tg {
                    border-collapse: collapse;
                    border-spacing: 0;
                    border-color: #999;
                }
    
                .tg td {
                    font-family: Arial, sans-serif;
                    font-size: 14px;
                    padding: 10px 5px;
                    border-style: solid;
                    border-width: 1px;
                    overflow: hidden;
                    word-break: normal;
                    border-color: #999;
                    color: #444;
                    background-color: #F7FDFA;
                }
    
                .tg th {
                    font-family: Arial, sans-serif;
                    font-size: 14px;
                    font-weight: normal;
                    padding: 10px 5px;
                    border-style: solid;
                    border-width: 1px;
                    overflow: hidden;
                    word-break: normal;
                    border-color: #999;
                    color: #fff;
                    background-color: #26ADE4;
                }
    
                .tg .tg-yw4l {
                    vertical-align: top
                }
    
                @media screen and (max-width: 767px) {
                    .tg {
                        width: auto !important;
                    }
                    .tg col {
                        width: auto !important;
                    }
                    .tg-wrap {
                        overflow-x: auto;
                        -webkit-overflow-scrolling: touch;
                    }
                }
            </style>
    
            <h1>Reserve Seats</h1>
            <!--script for timer on page load-->
            <script>
                i = 60;
    
                function onTimer() {
                    alert("test");
                    document.getElementById('mycounter').innerHTML = i;
                    i--;
                    if (i < 0) {
                        alert('No activity, seats not held.');
                    } else {
                        setTimeout(onTimer, 1000);
                    }
                }
            </script>
    <!--the below script prevents users from selecting more than 4 seats--> 
            <script type="text/javascript">
                function checkboxlimit(checkgroup, limit) {
                    var checkgroup = checkgroup
                    var limit = limit
                    for (var i = 0; i < checkgroup.length; i++) {
                        checkgroup[i].onclick = function() {
                            var checkedcount = 0
                            for (var i = 0; i < checkgroup.length; i++)
                                checkedcount += (checkgroup[i].checked) ? 1 : 0
                            if (checkedcount > limit) {
                                alert("You can select a maximum of " + limit + " seats")
                                this.checked = false
                            }
                        }
                    }
                }
            </script>
            <div class="tg-wrap">
                <table class="tg">
                    <form id="reserve" name="reserve" action="cart.php" method="post">
                        <tr>
                            <th class="tg-yw4l"></th>
                            <th class="tg-yw4l">1</th>
                            <th class="tg-yw4l">2</th>
                            <th class="tg-yw4l">3</th>
                            <th class="tg-yw4l">4</th>
                            <th class="tg-yw4l">5</th>
                            <th class="tg-yw4l">6</th>
                            <th class="tg-yw4l">7</th>
                            <th class="tg-yw4l">8</th>
                            <th class="tg-yw4l">9</th>
                            <th class="tg-yw4l">10</th>
                            <th class="tg-yw4l">11</th>
                            <th class="tg-yw4l">12</th>
                            <th class="tg-yw4l">13</th>
                            <th class="tg-yw4l">14</th>
                            <th class="tg-yw4l">15</th>
                            <th class="tg-yw4l">16</th>
                            <th class="tg-yw4l">17</th>
                            <th class="tg-yw4l">18</th>
                            <th class="tg-yw4l">19</th>
                            <th class="tg-yw4l">20</th>
                        </tr>
                        <tr>
                            <td>A</td>
                            <td><input type="checkbox" name="seat[]" value="A1">A1</td>
                            <td><input type="checkbox" name="seat[]" value="A2">A2</td>
                            <td><input type="checkbox" name="seat[]" value="A3">A3</td>
                            <td><input type="checkbox" name="seat[]" value="A4">A4</td>
                            <td><input type="checkbox" name="seat[]" value="A5">A5</td>
                            <td><input type="checkbox" name="seat[]" value="A6">A6</td>
                            <td><input type="checkbox" name="seat[]" value="A7">A7</td>
                            <td><input type="checkbox" name="seat[]" value="A8">A8</td>
                            <td><input type="checkbox" name="seat[]" value="A9">A9</td>
                            <td><input type="checkbox" name="seat[]" value="A10">A10</td>
                            <td><input type="checkbox" name="seat[]" value="A11">A11</td>
                            <td><input type="checkbox" name="seat[]" value="A12">A12</td>
                            <td><input type="checkbox" name="seat[]" value="A13">A13</td>
                            <td><input type="checkbox" name="seat[]" value="A14">A14</td>
                            <td><input type="checkbox" name="seat[]" value="A15">A15</td>
                            <td><input type="checkbox" name="seat[]" value="A16">A16</td>
                            <td><input type="checkbox" name="seat[]" value="A17">A17</td>
                            <td><input type="checkbox" name="seat[]" value="A18">A18</td>
                            <td><input type="checkbox" name="seat[]" value="A19">A19</td>
                            <td><input type="checkbox" name="seat[]" value="A20">A20</td>
                        </tr>
                        <tr>
                            <td>B</td>
                            <td><input type="checkbox" name="seat[]" value="B1">B1</td>
                            <td><input type="checkbox" name="seat[]" value="B2">B2</td>
                            <td><input type="checkbox" name="seat[]" value="B3">B3</td>
                            <td><input type="checkbox" name="seat[]" value="B4">B4</td>
                            <td><input type="checkbox" name="seat[]" value="B5">B5</td>
                            <td><input type="checkbox" name="seat[]" value="B6">B6</td>
                            <td><input type="checkbox" name="seat[]" value="B7">B7</td>
                            <td><input type="checkbox" name="seat[]" value="B8">B8</td>
                            <td><input type="checkbox" name="seat[]" value="B9">B9</td>
                            <td><input type="checkbox" name="seat[]" value="B10">B10</td>
                            <td><input type="checkbox" name="seat[]" value="B11">B11</td>
                            <td><input type="checkbox" name="seat[]" value="B12">B12</td>
                            <td><input type="checkbox" name="seat[]" value="B13">B13</td>
                            <td><input type="checkbox" name="seat[]" value="B14">B14</td>
                            <td><input type="checkbox" name="seat[]" value="B15">B15</td>
                            <td><input type="checkbox" name="seat[]" value="B16">B16</td>
                            <td><input type="checkbox" name="seat[]" value="B17">B17</td>
                            <td><input type="checkbox" name="seat[]" value="B18">B18</td>
                            <td><input type="checkbox" name="seat[]" value="B19">B19</td>
                            <td><input type="checkbox" name="seat[]" value="B20">B20</td>
                        </tr>
                        <tr>
                            <td>C</td>
                            <td><input type="checkbox" name="seat[]" value="C1">C1</td>
                            <td><input type="checkbox" name="seat[]" value="C2">C2</td>
                            <td><input type="checkbox" name="seat[]" value="C3">C3</td>
                            <td><input type="checkbox" name="seat[]" value="C4">C4</td>
                            <td><input type="checkbox" name="seat[]" value="C5">C5</td>
                            <td><input type="checkbox" name="seat[]" value="C6">C6</td>
                            <td><input type="checkbox" name="seat[]" value="C7">C7</td>
                            <td><input type="checkbox" name="seat[]" value="C8">C8</td>
                            <td><input type="checkbox" name="seat[]" value="C9">C9</td>
                            <td><input type="checkbox" name="seat[]" value="C10">C10</td>
                            <td><input type="checkbox" name="seat[]" value="C11">C11</td>
                            <td><input type="checkbox" name="seat[]" value="C12">C12</td>
                            <td><input type="checkbox" name="seat[]" value="C13">C13</td>
                            <td><input type="checkbox" name="seat[]" value="C14">C14</td>
                            <td><input type="checkbox" name="seat[]" value="C15">C15</td>
                            <td><input type="checkbox" name="seat[]" value="C16">C16</td>
                            <td><input type="checkbox" name="seat[]" value="C17">C17</td>
                            <td><input type="checkbox" name="seat[]" value="C18">C18</td>
                            <td><input type="checkbox" name="seat[]" value="C19">C19</td>
                            <td><input type="checkbox" name="seat[]" value="C20">C20</td>
                        </tr>
                        <tr>
                            <td>D</td>
                            <td><input type="checkbox" name="seat[]" value="D1">D1</td>
                            <td><input type="checkbox" name="seat[]" value="D2">D2</td>
                            <td><input type="checkbox" name="seat[]" value="D3">D3</td>
                            <td><input type="checkbox" name="seat[]" value="D4">D4</td>
                            <td><input type="checkbox" name="seat[]" value="D5">D5</td>
                            <td><input type="checkbox" name="seat[]" value="D6">D6</td>
                            <td><input type="checkbox" name="seat[]" value="D7">D7</td>
                            <td><input type="checkbox" name="seat[]" value="D8">D8</td>
                            <td><input type="checkbox" name="seat[]" value="D9">D9</td>
                            <td><input type="checkbox" name="seat[]" value="D10">D10</td>
                            <td><input type="checkbox" name="seat[]" value="D11">D11</td>
                            <td><input type="checkbox" name="seat[]" value="D12">D12</td>
                            <td><input type="checkbox" name="seat[]" value="D13">D13</td>
                            <td><input type="checkbox" name="seat[]" value="D14">D14</td>
                            <td><input type="checkbox" name="seat[]" value="D15">D15</td>
                            <td><input type="checkbox" name="seat[]" value="D16">D16</td>
                            <td><input type="checkbox" name="seat[]" value="D17">D17</td>
                            <td><input type="checkbox" name="seat[]" value="D18">D18</td>
                            <td><input type="checkbox" name="seat[]" value="D19">D19</td>
                            <td><input type="checkbox" name="seat[]" value="D20">D20</td>
                        </tr>
                        <tr>
                            <td>E</td>
                            <td><input type="checkbox" name="seat[]" value="E1">E1</td>
                            <td><input type="checkbox" name="seat[]" value="E2">E2</td>
                            <td><input type="checkbox" name="seat[]" value="E3">E3</td>
                            <td><input type="checkbox" name="seat[]" value="E4">E4</td>
                            <td><input type="checkbox" name="seat[]" value="E5">E5</td>
                            <td><input type="checkbox" name="seat[]" value="E6">E6</td>
                            <td><input type="checkbox" name="seat[]" value="E7">E7</td>
                            <td><input type="checkbox" name="seat[]" value="E8">E8</td>
                            <td><input type="checkbox" name="seat[]" value="E9">E9</td>
                            <td><input type="checkbox" name="seat[]" value="E10">E10</td>
                            <td><input type="checkbox" name="seat[]" value="E11">E11</td>
                            <td><input type="checkbox" name="seat[]" value="E12">E12</td>
                            <td><input type="checkbox" name="seat[]" value="E13">E13</td>
                            <td><input type="checkbox" name="seat[]" value="E14">E14</td>
                            <td><input type="checkbox" name="seat[]" value="E15">E15</td>
                            <td><input type="checkbox" name="seat[]" value="E16">E16</td>
                            <td><input type="checkbox" name="seat[]" value="E17">E17</td>
                            <td><input type="checkbox" name="seat[]" value="E18">E18</td>
                            <td><input type="checkbox" name="seat[]" value="E19">E19</td>
                            <td><input type="checkbox" name="seat[]" value="E20">E20</td>
                        </tr>
                </table>
                <input type="submit" value="Submit">
                </form>
                <script type="text/javascript">
                    checkboxlimit(document.forms.reserve["seat[]"], 4)
                </script>
    
                <!--timer script below resets page after 60 seconds of no clicks--> 
                        <div id="mycounter"></div>
                        <script>
                            i = 60;
                            function onTimer() {
                                $("submit").show(1000);
                                document.getElementById('mycounter').innerHTML = i;
                                i--;
                                if (i < 0) {
                                    alert('Your reservation has timed out.');
                                } else {
                                    setTimeout(onTimer, 1000);
                                }
                            }
                        </script>
                        <button type="submit" class="button button-block" /><a href="logout.php">Log Out</a>
                        </button>
                        <?php echo "string"; </body>
    
    </html>
    

    - cart.php -

    <?php session_start();
    include 'dbh.php';
    //seat from previous page selection
    
    $seat = implode(', ', $_POST['seat']);
    $id = $_SESSION['id'];
    ?>
    
    <html>
    <head>
        <title>Shopping Cart</title>
    </head>
    <body> 
    <?php 
    echo "Shopping Cart <br /><br /> $id's Seats: $seat <br /><br /> Please confirm within 60 seconds.<br /><br />";
    ?>
    <div id="mycounter"></div>
    <!--script for timer on page load--> 
    <script>
    i = 60;
    function onTimer() {
      document.getElementById('mycounter').innerHTML = i;
      i--;
      if (i < 0) {
        alert('Your reservation has timed out.');
        window.history.back();
      }
      else {
        setTimeout(onTimer, 1000);
      }
    }
    window.onload = onTimer;
    </script>
    <br />
    <br />
    
    <?php 
    echo '<button><a href="reserve.php?seat=' . $seat . '">Confirm</a></button>';?>
    <button type="submit" class="button button-block"/><a href="seats.html">Cancel</a></button>
    </body>
    </html>
    

1 个答案:

答案 0 :(得分:1)

_转换为'如果结果数组的第一行大于1',而不是检查第一行是否大于1,检查查询是否返回超过0行。

+

至于您的代码的任何其他问题,您需要提供更具体的问题。如果您不确定哪些部分不起作用,我建议启用错误报告并查看浏览器控制台是否有任何错误消息。

"^[-A-Z_]+"