显示/隐藏公共输入字段然后发布到php

我正在为用户开发一个表单，他希望表单字段根据下拉菜单进行更改。因此，如果他选择“图书馆”作为设施名称，他应该介入其区域，容量，数量和互联网可用性状态。另一方面，如果他选择“展示区”，则应该介入其类型，区域，容量，数量和互联网状态。正如你可以看到他们是一个常见的“重复”字段，导致在接收插入的数据在php中的问题。显示/隐藏公共输入字段然后发布到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

当我赞同所有的表单字段，我什么也没得到。

如何解决这个问题？

来源

2015-10-25 Learner

尝试把你的php代码放在文件的开始处。 – xReprisal

@ArekGorecki虽然这并没有解决问题，但谢谢 – Learner

错误？你可以在MySQL连接之前添加if（isset（$ _ GET））{var_dump（$ _ GET）}。 – Twisty

我简单地通过改变字段名称来解决这个问题是唯一的。然后，我使用设备名称的切换（唯一的字段名称以旧形式）。在每种情况下，我都会收到相应的输入字段并插入它们。它并不像我想象的那样令人头疼。

来源

2015-10-27 12:55:52 Learner

不得不坐着盯着这一点。我会分开你的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。所以现在我们需要设置该文件来捕获发布的数据，并将其添加到数据库中。

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

<?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将数据发布到此表单处理程序，处理结果并显示结果或允许用户添加另一个结果。

来源

2015-10-26 22:54:40 Twisty

高级谢谢你的努力。但是，我的脚本有一个连接到数据库（在我的PHP代码）。此外，您的解决方案没有插入任何东西，虽然我没有得到任何错误。这是否与你一起工作？我必须使用AJAX吗？ – Learner

显示/隐藏公共输入字段然后发布到php

回答

相关问题