顯示/隱藏公共輸入字段然後發佈到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

回答

相關問題