显示/隐藏常用输入字段然后发布到php

时间：2015-10-25 06:58:16

标签： php jquery

我正在为用户开发一个表单，他希望表单字段根据下拉菜单进行更改。因此，如果他选择“图书馆”作为设施名称，他应该在其面积，容量，数量和互联网可用性状态之间进行选择。另一方面，如果他选择“展览区”，他应该在类型，面积，容量，数量和互联网状态之间进行选择。正如您所看到的，它们是一个常见的“重复”字段，导致在php中接收插入数据时出现问题。

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<!-- jQuery Validation Plugin 
hosted by Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="addFacility-validation.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $.viewMap = {
    'none' : $([]),
    'Library' : $('#Library'),
    'Clinic' : $('#Library'),
    'Indoor Playgrounds' : $('#Library'),
    'Outdoor Playgrounds' : $('#Library'),
    'Mosque' : $('#Library'),
    'Auditorium' : $('#Library'),
    'Ambulance' : $('#Ambulance'),
    'Exhibition Area' : $('#Exhibition,#Library'),
    'Cafeteria' : $('#Library'),
    'Shaded Barking Area' : $('#ShadedBarkingArea'),
    'Toilet' : $('#Toilet'),
    'Drinking Water Fountain' : $('#DrinkingWaterFountain'),
    'Green Areas' : $('#GreenAreas'),
    'Ground Water Tank' : $('#GroundWaterTank'),
    'Student Doom' : $('#StudentDoom'),
    'Student Residential Units' : $('#StudentDoom'),
    'Student Shaded Areas' : $('#StudentShadedAreas'),
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  });
});
</script>
</head>
<body>
<?php 
    $dbhost="localhost";
    $dbuser="root";
    $con = mysqli_connect($dbhost,$dbuser, "");
    if (!$con) 
    {
        printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
    }
    mysqli_select_db($con,'dahbulidings');

    if(isset($_GET['add']))
    {
        if(! get_magic_quotes_gpc() )
        {
            $name = addslashes ($_GET['name']);
            $type = addslashes ($_GET['type']);
            $area = addslashes ($_GET['area']);
            $capacity = addslashes ($_GET['capacity']);
            $quantity = addslashes ($_GET['quantity']);
            $internet = addslashes ($_GET['internet']);
            $available = addslashes ($_GET['available']);
            $comments = addslashes ($_GET['comments']);

        }
        else
        {
            $name = $_GET['name'];
            $type = $_GET['type'];
            $area = $_GET['area'];
            $capacity = $_GET['capacity'];
            $quantity = $_GET['quantity'];
            $internet = $_GET['internet'];
            $available = $_GET['available'];
            $comments = $_GET['comments'];
        }

        echo $b_id.$name.$type.$area.$capacity.$quantity.$internet.$available.$comments;
    }
?>
<div id="content">
  <h3>Facility Information</h3>
  <form action="test.php" method="get" enctype="multipart/form-data" id="addFac-form" novalidate>
    <div class="formLayout">
      <div class="required">
        <label>Facility name</label>
        <select name="name" id="viewSelector">
          <option value="none"></option>
          <option value="Library">Library</option>
          <option value="Clinic">Clinic</option>
          <option value="Indoor Playgrounds">Indoor Playgrounds</option>
          <option value="Outdoor Playgrounds">Outdoor Playgrounds</option>
          <option value="Mosque">Mosque</option>
          <option value="Auditorium">Auditorium</option>
          <option value="Exhibition Area">Exhibition Area</option>
          <option value="Cafeteria">Cafeteria</option>
          <option value="Shaded Barking Area">Shaded Barking Area</option>
          <option value="Ambulance">Ambulance</option>
          <option value="Toilet">Toilet</option>
          <option value="Drinking Water Fountain">Drinking Water Fountain</option>
          <option value="Green Areas">Green Areas</option>
          <option value="Ground Water Tank">Ground Water Tank</option>
          <option value="Student Doom">Student Doom</option>
          <option value="Student Residential Units">Student Residential Units</option>
          <option value="Student Shaded Areas">Student Shaded Areas</option>
        </select>
      </div>
      <br>
      <div id="Exhibition" style="display:none">
        <div class="required">
          <label>Type</label>
          <select name="type">
            <option value="none"></option>
            <option value="Atrium">Atrium</option>
            <option value="Red Carpet">Red Carpet</option>
            <option value="Gallery C Ground Floor">Gallery C Ground Floor</option>
            <option value="Gallery B Ground Floor">Gallery B Ground Floor</option>
            <option value="Gallery C Third Floor">Gallery C Third Floor</option>
            <option value="Gallery B Third Floor">Gallery B Third Floor</option>
          </select>
        </div>
        <br>
      </div>
      <div id="Library" style="display:none">
        <div class="required">
          <label>Area</label>
          <input type="text" name="area" dir="ltr">
        </div>
        <br>
        <div class="required">
          <label>Capacity</label>
          <input type="text" name="capacity" dir="ltr">
        </div>
        <br>
        <div class="required">
          <label>Quantity</label>
          <select name="quantity">
            <option value="none"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <br>
        <div class="required">
          <label>Internet</label>
          <select name="internet">
            <option value="none"></option>
            <option value="Available">Available</option>
            <option value="Not Available">Not available</option>
          </select>
        </div>
        <br>
      </div>
      <div id="Ambulance" style="display:none">
        <div class="required">
          <label>Quantity</label>
          <select name="quantity">
            <option value="none"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <br>
      </div>
      <div id="ShadedBarkingArea" style="display:none">
        <div class="required">
          <label>Area</label>
          <input type="text" name="area" dir="ltr">
        </div>
        <br>
        <div class="required">
          <label>Capacity</label>
          <input type="text" name="capacity" dir="ltr">
        </div>
        <br>
        <div class="required">
          <label>Quantity</label>
          <select name="quantity">
            <option value="none"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <br>
      </div>
      <div id="Toilet" style="display:none">
        <div class="required">
          <label>Type</label>
          <select name="type">
            <option value="none"></option>
            <option value="Single Surface Area">Single Surface Area</option>
            <option value="Common  Surface Area">Common  Surface Area</option>
          </select>
        </div>
        <br>
        <div class="required">
          <label>Area</label>
          <input type="text" name="area" dir="ltr">
        </div>
        <br>
        <div class="required">
          <label>Quantity</label>
          <select name="quantity">
            <option value="none"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <div id="DrinkingWaterFountain" style="display:none">
        <div class="required">
          <label>Quantity</label>
          <select name="quantity">
            <option value="none"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <div id="GreenAreas" style="display:none">
        <div class="required">
          <label>Type</label>
          <select name="type">
            <option value="none"></option>
            <option value="Fountain Area">Fountain Area</option>
            <option value="Bandar Bin Sultan Garden">Bandar Bin Sultan Garden</option>
            <option value="Gate 3 Area">Gate 3 Area</option>
            <option value="Gate 1 Area">Gate 1 Area</option>
          </select>
        </div>
        <br>
        <div class="required">
          <label>Area</label>
          <input type="text" name="area" dir="ltr">
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <div id="GroundWaterTank" style="display:none">
        <div class="required">
          <label>Capacity</label>
          <input type="text" name="capacity" dir="ltr">
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <div id="StudentDoom" style="display:none">
        <div class="required">
          <label>Availability</label>
          <select name="available">
            <option value="none"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <div id="StudentShadedAreas" style="display:none">
        <div class="required">
          <label>Area</label>
          <input type="text" name="area" dir="ltr">
        </div>
        <br>
        <label>Comments</label>
        <input type="text" name="comments" dir="ltr">
        <br>
      </div>
      <input type="submit" value="Add" name="add" id="add">
    </div>
  </form>
</div>
</body>
</html>

Fiddle

当我回显所有表单字段时，我什么都没得到。

如何解决此问题？

2 个答案:

答案 0 :(得分：0)

不得不坐下来盯着这一点。我会将您的PHP与HTML分开。对于这个答案，让我们称它们为form.html和handler.php。

form.html会有这样的形式，如下：

<div id="content">
     <h3>Facility Information</h3>
    <form action="handler.php" method="POST" enctype="multipart/form-data" id="addFac-form" novalidate>
        <div class="formLayout">
            <div class="required">
                <label>Facility name</label>
                <select name="name" id="viewSelector">
                    <option value="none"></option>
                    <option value="Library">Library</option>
                    <option value="Clinic">Clinic</option>
                    <option value="Indoor Playgrounds">Indoor Playgrounds</option>
                    <option value="Outdoor Playgrounds">Outdoor Playgrounds</option>
                    <option value="Mosque">Mosque</option>
                    <option value="Auditorium">Auditorium</option>
                    <option value="Exhibition Area">Exhibition Area</option>
                    <option value="Cafeteria">Cafeteria</option>
                    <option value="Shaded Barking Area">Shaded Barking Area</option>
                    <option value="Ambulance">Ambulance</option>
                    <option value="Toilet">Toilet</option>
                    <option value="Drinking Water Fountain">Drinking Water Fountain</option>
                    <option value="Green Areas">Green Areas</option>
                    <option value="Ground Water Tank">Ground Water Tank</option>
                    <option value="Student Doom">Student Doom</option>
                    <option value="Student Residential Units">Student Residential Units</option>
                    <option value="Student Shaded Areas">Student Shaded Areas</option>
                </select>
            </div>
            <br>
            <div id="Exhibition" style="display:none">
                <div class="required">
                    <label>Type</label>
                    <select name="type">
                        <option value="none"></option>
                        <option value="Atrium">Atrium</option>
                        <option value="Red Carpet">Red Carpet</option>
                        <option value="Gallery C Ground Floor">Gallery C Ground Floor</option>
                        <option value="Gallery B Ground Floor">Gallery B Ground Floor</option>
                        <option value="Gallery C Third Floor">Gallery C Third Floor</option>
                        <option value="Gallery B Third Floor">Gallery B Third Floor</option>
                    </select>
                </div>
                <br>
            </div>
            <div id="Library" style="display:none">
                <div class="required">
                    <label>Area</label>
                    <input type="text" name="area" dir="ltr">
                </div>
                <br>
                <div class="required">
                    <label>Capacity</label>
                    <input type="text" name="capacity" dir="ltr">
                </div>
                <br>
                <div class="required">
                    <label>Quantity</label>
                    <select name="quantity">
                        <option value="none"></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <br>
                <div class="required">
                    <label>Internet</label>
                    <select name="internet">
                        <option value="none"></option>
                        <option value="Available">Available</option>
                        <option value="Not Available">Not available</option>
                    </select>
                </div>
                <br>
            </div>
            <div id="Ambulance" style="display:none">
                <div class="required">
                    <label>Quantity</label>
                    <select name="quantity">
                        <option value="none"></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <br>
            </div>
            <div id="ShadedBarkingArea" style="display:none">
                <div class="required">
                    <label>Area</label>
                    <input type="text" name="area" dir="ltr">
                </div>
                <br>
                <div class="required">
                    <label>Capacity</label>
                    <input type="text" name="capacity" dir="ltr">
                </div>
                <br>
                <div class="required">
                    <label>Quantity</label>
                    <select name="quantity">
                        <option value="none"></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <br>
            </div>
            <div id="Toilet" style="display:none">
                <div class="required">
                    <label>Type</label>
                    <select name="type">
                        <option value="none"></option>
                        <option value="Single Surface Area">Single Surface Area</option>
                        <option value="Common  Surface Area">Common Surface Area</option>
                    </select>
                </div>
                <br>
                <div class="required">
                    <label>Area</label>
                    <input type="text" name="area" dir="ltr">
                </div>
                <br>
                <div class="required">
                    <label>Quantity</label>
                    <select name="quantity">
                        <option value="none"></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <div id="DrinkingWaterFountain" style="display:none">
                <div class="required">
                    <label>Quantity</label>
                    <select name="quantity">
                        <option value="none"></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <div id="GreenAreas" style="display:none">
                <div class="required">
                    <label>Type</label>
                    <select name="type">
                        <option value="none"></option>
                        <option value="Fountain Area">Fountain Area</option>
                        <option value="Bandar Bin Sultan Garden">Bandar Bin Sultan Garden</option>
                        <option value="Gate 3 Area">Gate 3 Area</option>
                        <option value="Gate 1 Area">Gate 1 Area</option>
                    </select>
                </div>
                <br>
                <div class="required">
                    <label>Area</label>
                    <input type="text" name="area" dir="ltr">
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <div id="GroundWaterTank" style="display:none">
                <div class="required">
                    <label>Capacity</label>
                    <input type="text" name="capacity" dir="ltr">
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <div id="StudentDoom" style="display:none">
                <div class="required">
                    <label>Availability</label>
                    <select name="available">
                        <option value="none"></option>
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <div id="StudentShadedAreas" style="display:none">
                <div class="required">
                    <label>Area</label>
                    <input type="text" name="area" dir="ltr">
                </div>
                <br>
                <label>Comments</label>
                <input type="text" name="comments" dir="ltr">
                <br>
            </div>
            <input type="submit" value="Add" name="add" id="add">
        </div>
    </form>
</div>

所以我们稍微更改了表单，以便POST，我们指示它将数据发布到handler.php。所以现在我们需要设置该文件以捕获发布的数据，并将其添加到数据库中。

我注意到您的脚本没有Query但您已连接到数据库。这是一个问题。这是我可以建议的内容，您必须修复它以匹配您的环境/数据库。

<?php 
// Check if we got a submission and then connect to the database
if(isset($_POST['add'])){
    // Conditionally set the variable or a Default value
    $name = isset($_POST['name'])?$_POST['name']:"none";
    $type = isset($_POST['type'])?$_POST['type']:"none";
    $area = isset($_POST['area'])?$_POST['area']:"none";
    $capacity = isset($_POST['capacity'])?$_POST['capacity']:"none";
    $quantity = isset($_POST['quantity'])?$_POST['quantity']:0;
    $internet = isset($_POST['internet'])?$_POST['internet']:"none";
    $available = isset($_POST['available'])?$_POST['available']:"no";
    $comments = isset($_POST['comments'])?$_POST['comments']:"none";
} else {
    die("Form data not submitted.\r\n");
}
$dbhost="localhost";
$dbuser="root";
$con = mysqli_connect($dbhost, $dbuser, "", "dahbuildings");
if (!$con){
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
// create a prepared statement
if ($stmt = mysqli_prepare($link, "INSERT INTO tableName (name, type, area, capacity, internet, available, comments) VALUES (?, ?, ?, ?, ?, ?, ?)")) {
    // bind parameters for markers
    mysqli_stmt_bind_param($stmt, "sssisss", $name, $type, $area, $capacity, $internet, $available, $comments);
    // execute query
    mysqli_stmt_execute($stmt);
    echo mysqli_insert_id($con) . ": $name, $type, $area, $capacity, $quantity, $internet, $available, $comments";
    // close statement
    mysqli_stmt_close($stmt);
}
mysqli_close($con);
?>

您现在也可以通过AJAX将数据发布到此表单处理程序，处理结果，显示结果或允许用户添加另一个。

答案 1 :(得分：0)

我只是通过将字段名称更改为唯一来解决此问题。然后，我转换设施名称的开关（唯一具有旧形式的唯一名称的字段）。在每种情况下，我都收到相应的输入字段并插入它们。正如我想象的那样，这并不是什么大问题。

相关问题
最新问题