在bootstrap中使用模式表单向数据库添加数据

时间:2017-06-28 14:02:11

标签: php twitter-bootstrap

我今天一直在努力解决这个问题。似乎无法让它发挥作用,它所做的只是导航到“add-entry.php?go'在导航栏中,但是变为灰色,然后重新加载index.php,其中模态仍然完整,其中包含我的条目。

这是我的HTML,包括表单和javascript过滤器输入。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ProSys Component Lookup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    <!--Custom CSS -->
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <!-- Wrapper -->
  <div class="container-fluid">
  <div class="col-xs-12">
  <div class="col-xs-12">
    <!-- Header -->
    <div class="page-header">
      <h1><a href="index.php">ProSys Component Lookup</a></h1><br>
    </div>
    <!-- Main table content -->
    <div class="container-fluid">
      <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Add New Item</button><br>
      <div class="modal fade" role="dialog" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Add New Item</h4>
            </div>
            <div class="modal-body">
              <form method="post" action="add-entry.php?go" role="form">
                <div class="form-group">
                  <label for="location">Location:</label>
                  <input type="text" class="form-control" name="location">
                </div>
                <div class="form-group">
                  <label for="category">Category:</label>
                  <select class="form-control" name="category">
                    <option>Processor</option>
                    <option>Diode</option>
                    <option>Fuse</option>
                    <option>Regulator</option>
                    <option>Capacitor</option>
                    <option>Inductor</option>
                    <option>LED</option>
                    <option>Gate</option>
                    <option>Modem</option>
                    <option>Transceiver</option>
                    <option>Thermistor</option>
                    <option>Load Switch</option>
                    <option>Op Amp</option>
                    <option>Optocoupler</option>
                    <option>Line Driver</option>
                    <option>ESD Protection</option>
                    <option>ADC</option>
                    <option>RTC</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="manufacturer">Manufacturer:</label>
                  <input type="text" class="form-control" name="manufacturer">
                </div>
                <div class="form-group">
                  <label for="description">Description:</label>
                  <textarea type="text" class="form-control" name="description" rows="5"></textarea>
                </div>
                <div class="form-group">
                  <label for="packagesize">PackageSize:</label>
                  <input type="text" class="form-control" name="packagesize">
                </div>
                <div class="form-group">
                  <label for="category">Supplier:</label>
                  <select class="form-control" name="supplier">
                    <option>Farnell</option>
                    <option>RS</option>
                    <option>Rapid</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="suppliernumber">Supplier Number:</label>
                  <input type="text" class="form-control" name="suppliernumber">
                </div>
                <div class="form-group">
                  <label for="stock">Stock:</label>
                  <input type="text" class="form-control" name="stock">
                </div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-default">Add</button>
              </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Search box -->
      <div class="col-md-3">
        <form class="styled">
            <input type="text" class="form-control" onkeyup="myFunctionOne()" id="myInput" placeholder="Search..">
        </form><br>
      </div>
    <div class="panel">
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-12">
            <table class="table table-hover" id="table_demo">
              <thead>
                <tr>
                  <th>Location</th>
                  <th>Manufacturer</th>
                  <th>Description</th>
                  <th>PackageSize</th>
                  <th>Supplier</th>
                  <th>SupplierNumber</th>
                  <th>Stock</th>
                </tr>
              </thead>
              <tbody id="myTable">
                <tr>
                  <!-- Database connect and display as table -->
                  <?php
                  include("dbconnect.php");

                  $result = mysql_query("SELECT DrawLocation, Manufacturer, Description, PackageSize, Supplier, SupplierNumber, Stock FROM complibrary");

                  while($complibrary = mysql_fetch_array($result))
                  {
                    echo"<td>".$complibrary['DrawLocation']."</td>";
                    echo"<td>".$complibrary['Manufacturer']."</td>";
                    echo"<td>".$complibrary['Description']."</td>";
                    echo"<td>".$complibrary['PackageSize']."</td>";
                    echo"<td>".$complibrary['Supplier']."</a></td>";
                    //IF statement adds in links for web search via SupplierNumber
                    if ($complibrary['Supplier'] == 'Farnell') {
                      echo"<td><a target='_blank' href='http://uk.farnell.com/search?st=".$complibrary['SupplierNumber']."'>".$complibrary['SupplierNumber']."</a></td>";
                    } elseif ($complibrary['Supplier'] == 'RS') {
                      echo"<td><a target='_blank' href='http://uk.rs-online.com/web/c/?sra=oss&r=t&searchTerm=".$complibrary['SupplierNumber']."'>".$complibrary['SupplierNumber']."</a></td>";
                    } elseif ($complibrary['Supplier'] == 'Rapid') {
                      echo"<td><a target='_blank' href='https://www.rapidonline.com/Catalogue/Search?query=".$complibrary['SupplierNumber']."'>".$complibrary['SupplierNumber']."</a></td>";
                    } else {
                      echo"<td>".$complibrary['SupplierNumber']."</td>";
                    }
                    //IF statement end
                    echo"<td>".$complibrary['Stock']."</td>";
                    echo "</tr>";
                  }
                  mysql_close($conn);
                  ?>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </body>
  <!-- Latest jQuery -->
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <!-- Filtering script -->
  <script>
    function myFunctionOne() {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  </script>
</html>

这是我的add-entry.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      if (isset($_POST['location'])){
        $hostname = "localhost";
        $username = "root";
        $password = "";
        $dbname = "componentlookup";

        $conn = mysql_connect($hostname, $username, $password);

        if (!$conn) {
          die('Could not connect: ' . mysql_error());
        }

        mysql_select_db($dbname, $conn);

        $location = $_POST['location'];
        $category = $_POST['category'];
        $manufacturer = $_POST['manufacturer'];
        $description = $_POST['description'];
        $packagesize = $_POST['packagesize'];
        $supplier = $_POST['supplier'];
        $suppliernumber = $_POST['suppliernumber'];
        $stock = $_POST['stock'];

        $query = mysql_query("INSERT INTO 'complibrary' (ID, DrawLocation, Category, Manufacturer, Description, PackageSize, Supplier, SupplierNumber, Stock) VALUES ('NULL', '$location', '$category', '$manufacturer', '$description', '$packagesize', '$supplier', '$suppliernumber', '$stock')");

        echo "Item added sucessfully. Click <a href='index.php'>HERE</a> to go back.";
        mysql_close($conn);
      }
    ?>
  </body>
</html>

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我认为您应该在添加按钮上放置data-dismiss="modal"以关闭窗口。 另外,我认为你不应该使用mysql连接。更好的是,使用mysqliPDO