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>
When I echo all the form fields, I get nothing.
How to fix this ?
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.
Had to sit and stare at this for a bit. I would separate your PHP From your HTML. Let's call them form.html and handler.php for the case of this answer.
form.html would have the form, like so:
<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>
So we change the form a little so it does POST and we direct it to post the data to handler.php. So now we need to setup that file to catch the data posted, and add it to the database.
I noticed your script has no Query yet you connect to the database. So that is a problem. Here's what I can suggest and you'll have to fix it to match your environment/database.
<?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.
");
}
$dbhost="localhost";
$dbuser="root";
$con = mysqli_connect($dbhost, $dbuser, "", "dahbuildings");
if (!$con){
printf("Connect failed: %s
", 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);
?>
You can now also post the data via AJAX to this form handler, process the results, and display the results or allow the user to add another.