提交PHP回显覆盖页面

Question

I'm working on a page that aims to document borrowed resources. 我正在制作一个旨在记录借入资源的页面。 I'd like to ensure fields aren't empty before inserting a new record into the database. 我想确保在将新记录插入数据库之前字段不为空。 When empty fields are found, I inform the user through an alert box. 当发现空白字段时，我会通过警报框通知用户。

The problem I'm having is once the alert is displayed, everything that takes place after the "if empty" block is removed from the page. 我遇到的问题是，显示警报后，从页面中删除了“如果为空”块之后发生的所有事情。 How can I create the alert box without having this happen? 如何在没有发生这种情况的情况下创建警报框？

index.php 的index.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Resource Tracker</title>

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="pure-min.css">
  <link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">

  <script src="jquery-1.11.3.min.js"></script>
  <script src="bootstrap-datepicker.js"></script>
</head>

<body>
  <h1>Resource Tracker</h1>

    <?php 
    // Form to insert new items
    echo
    "<form method='POST' action='index.php' class='pure-form'>
    <fieldset>
      <legend>Add new item</legend>

      <input type='text' name='contact' placeholder='Contact'>
      <input type='text' name='resource' placeholder='Resource Borrowed'>
      <input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>

      <button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
    </fieldset>
    </form>";

    if (isset($_POST['insertButton'])) {
      $contact = trim($_POST["contact"]);
      $resource = trim($_POST["resource"]);
      $returnDate = trim($_POST["returnDate"]);

      if(empty($contact)) {
        echo "<script type='text/javascript'>alert('Contact infomation is not valid.');</script>";
        return;
      }
      if (empty($resource)) {
        echo "<script type='text/javascript'>alert('Resource infomation is not valid.');</script>";
        return;
      }
      if (empty($returnDate)) {
        echo "<script type='text/javascript'>alert('Return date infomation is not valid.');</script>";
        return;
      }

      $current_date = date('F d, Y');
      $sql = "insert into borrowed_assets values ('$contact', '$resource', '" . $current_date . "', '$returnDate')";

      $servername = "********.com";
      $username = "********";
      $password = "********";
      $dbname = "resource_tracker";
      // Create connection
      $conn = new mysqli($servername, $username, $password, $dbname);
      // Check connection
      if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
      } 
      // Insert into database
      $result = $conn->query($sql);
      mysqli_close($conn);

      // Reload page to prevent duplicate submitions
      header("Location: " . $_SERVER['REQUEST_URI']);
      exit();
    }
  ?>

  <table class="pure-table">
    <thead>
      <tr>
        <th width="23.75%">Contact</th>
        <th width="23.75%">Resource Borrowed</th>
        <th width="23.75%">Date Requested</th>
        <th width="23.75%">Return Date</th>
        <th width="5%">Action</th>
      </tr>
    </thead>

    <tbody>
      <?php
        $servername = "********.com";
        $username = "********";
        $password = "********";
        $dbname = "resource_tracker";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname);
        // Check connection
        if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
        } 

        $sql = "SELECT * FROM borrowed_assets";
        $result = $conn->query($sql);
        mysqli_close($conn);

        if ($result->num_rows > 0) {
          // output data of each row
          while($row = $result->fetch_assoc()) {
            echo "<tr>";
            echo "<td id='contact'>" . $row["contact"] . "</td>";
            echo "<td id='asset'>" . $row["asset"] . "</td>";
            echo "<td id='request_date'>" . $row["request_date"] . "</td>";
            echo "<td id='return_date'>" . $row["return_date"] . "</td>";
            echo "<td><img src='glyphicons-17-bin.png' id='remove' align='center' style='display: block; height: 1.2em; margin-left: auto; margin-right: auto;'></td>";
            echo "</tr>";
          }
        }
      ?>  
    </tbody>
  </table>

  <script type="text/javascript">
    $(document).ready(function () {      
        $('#example1').datepicker({
            format: "MM dd, yyyy"
        });  
     });
  </script>

  <script type="text/javascript">
    $('img[src$="glyphicons-17-bin.png"]').click(function(e){
      var fields = [];
      $(this).closest('tr').children().each(function () {
        fields.push(this.innerHTML);
      });
      $(this).closest('tr').fadeOut();
      fields.pop();
      $.ajax({
        type: "POST",
        url: "delete.php",
        data: { record: fields }
      });
    })
  </script>

</body>
</html>

The html generated before a blank insertion looks like: 空白插入之前生成的html如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Resource Tracker</title>

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="pure-min.css">
  <link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">

  <script src="jquery-1.11.3.min.js"></script>
  <script src="bootstrap-datepicker.js"></script>
</head>

<body>
  <h1>Resource Tracker</h1>

    <form method='POST' action='index.php' class='pure-form'>
    <fieldset>
      <legend>Add new item</legend>

      <input type='text' name='contact' placeholder='Contact'>
      <input type='text' name='resource' placeholder='Resource Borrowed'>
      <input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>

      <button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
    </fieldset>
    </form>
  <table class="pure-table">
    <thead>
      <tr>
        <th width="23.75%">Contact</th>
        <th width="23.75%">Resource Borrowed</th>
        <th width="23.75%">Date Requested</th>
        <th width="23.75%">Return Date</th>
        <th width="5%">Action</th>
      </tr>
    </thead>

    <tbody>
      <tr><td id='contact'>Bobby Tables</td><td id='asset'>server1234</td><td id='request_date'>August 05, 2015</td><td id='return_date'>September 04, 2015</td><td><img src='glyphicons-17-bin.png' id='remove' align='center' style='display: block; height: 1.2em; margin-left: auto; margin-right: auto;'></td></tr>  
    </tbody>
  </table>

  <script type="text/javascript">
    $(document).ready(function () {      
        $('#example1').datepicker({
            format: "MM dd, yyyy"
        });  
     });
  </script>

  <script type="text/javascript">
    $('img[src$="glyphicons-17-bin.png"]').click(function(e){
      var fields = [];
      $(this).closest('tr').children().each(function () {
        fields.push(this.innerHTML);
      });
      $(this).closest('tr').fadeOut();
      fields.pop();
      // $.post('delete.php', 'record=' + )
      $.ajax({
        type: "POST",
        url: "delete.php",
        data: { record: fields }
      });
      console.log(fields);
    })
  </script>

</body>
</html>

Afterwards it looks like: 之后，它看起来像：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Resource Tracker</title>

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="pure-min.css">
  <link rel="stylesheet" href="bootstrap-datepicker3.standalone.min.css">

  <script src="jquery-1.11.3.min.js"></script>
  <script src="bootstrap-datepicker.js"></script>
</head>

<body>
  <h1>Resource Tracker</h1>

    <form method='POST' action='index.php' class='pure-form'>
    <fieldset>
      <legend>Add new item</legend>

      <input type='text' name='contact' placeholder='Contact'>
      <input type='text' name='resource' placeholder='Resource Borrowed'>
      <input type='text' name='returnDate' class='input-append date myDatepicker' id='example1' placeholder='Return Date'>

      <button type='submit' name='insertButton' class='pure-button pure-button-primary'>Add</button>
    </fieldset>
    </form><script type='text/javascript'>alert('Contact infomation is not valid.');</script>

Answer 1

您在脚本的顶级上下文中调用return ，因此它可以作为exit()调用有效。

提交PHP回显覆盖页面

问题描述

1 个解决方案

解决方案1
0 2015-08-05 18:57:52

提交PHP回显覆盖页面

问题描述

1 个解决方案

解决方案1 0 2015-08-05 18:57:52

解决方案1
0 2015-08-05 18:57:52