drpogkqqi536984960 2015-10-25 06:58
浏览 33
已采纳

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

I am developing a form for user and he wants the form fields to change according to a drop down menu. So if he choose "Library" for example as a facility name, he should inter its area, capacity, quantity and internet availability status. On the other hand if he select "Exhibition Area", he should inter its type, area, capacity, quantity and internet status. As you can see their is a common "duplicate" fields that result a problem in receiving inserted data in php.

Here is my code:

<!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
", 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

When I echo all the form fields, I get nothing.

How to fix this ?

  • 写回答

2条回答 默认 最新

  • donljt2606 2015-10-27 12:55
    关注

    I solved this issue simply by changing the fields names to be unique. Then, I wort a switch of the facility name (the only field that has a unique name in my old form). In each case I was receiving it's corresponding input fields and inserting them. its wasn't a big headache as what I have imagined.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？