So my "type1" select statement will select an issue category, and then based on that issue I want a dropdown of employees that deal with that issue in another drop down. Also how do I make all the hidden select statements occupy the same space?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>IssueReport</title>
<script src = "../../jquery.js"></script>
<style>
body{
padding:0;
margin:0;
}
#box {
padding: 5px;
color:black;
margin: 0 auto;
border-style: solid;
border-color: #0000E6;
border-width: 2px;
background-color: #58C6EB;
width: 162px;
height: 687px;
float: left;
border-radius: 10px;
}
.word{
color: #0000E6;
}
.buttons{
background-color: #CCFFFF;
border-radius: 5px;
}
</style>
<script>
function showForm(){
var issue = document.getElementById("type1").value;
if(issue == 'Program Glitch'){
document.getElementById("IT1").style.display = "block";
}
$("#type1").onchange(function{
});
}
$(document).ready(function(){
$("#sub").click(function(){
var user_issue = $("#issue").val();
var user_priority = $("#priority").val();
var user_type = $("#type1").val();
var user_author = $("#author").val();
$.post("BugReport.php",{issue:user_issue,priority:user_priority,type1:user_type,author:user_author},function(data){
$("#result").html(data);
});
});
$("#sub").click(function(){
document.getElementById('issue').value='';
$('#type1').prop('selectedIndex', 0);
$('#priority').prop('selectedIndex', 1);
});
});
</script>
</head>
<body>
<div id="box">
<h3 class = "word" style = "margin:10px 30px 30px 30px;">Issue Report</h3>
<div class = "word" style = "width: 100px; margin-left: auto; margin-right: auto">Type Of Issue:</div>
<div style = " max-width: 150px; margin-left: auto; margin-right: auto; padding: 2px">
<form action="BugReport.html" method="post">
<select onchange = "showForm()" class = "buttons" name = "type1" id = "type1" style = 'max-width: 150px;'>
<?php
$servername = "localhost";
$username = "user";
$password = "pass";
$database = "database";
$con = mysqli_connect($servername,$username,$password,$database);
if($con->connect_error){
die("Connection failed " . $con->connect_error);
}
$sql1 = "select issue_name, issue_description from Issue";
$result = mysqli_query($con,$sql1);
while ($row = mysqli_fetch_array($result)) {
$issue = $row['issue_name'];
$des = $row['issue_description'];
echo "<option value = '$issue' title = '$des'>$issue</option>";
}
?>
</select>
</form></div>
<form action="BugReport.html" method="post">
<div id = "Buyers1" style = "visibility:hidden;"><select class = "buttons" name = "author" id = "Buyers" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = '1'";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></div></form>
<div id = "Operations1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "Operations" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 2";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "IT1" style = "display:none;"><form action="BugReport.html" method="post">
<select onchange = "showForm()" class = "buttons" name = "author" id = "IT" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 3";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "CustomerService1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "CustomerService" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 4";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "HR1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "HR" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 5";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<div id = "Logistics1" style = "visibility:hidden;"><form action="BugReport.html" method="post">
<select class = "buttons" name = "author" id = "Logistics" style = "margin: 0px 30px 0px 30px;">
<?php
$sql = "select first, last from Employee where department_id = 6";
$result = mysqli_query($con,$sql);
while ($row = mysqli_fetch_array($result)) {
$name = $row['first'] . ' ' . $row['last'];
echo "<option value = '$name'>$name</option>";
}
?>
</select></form></div>
<form action="BugDisplayAndReply.html" method="post">
<label></label><br>
<textarea style = "max-width: 156px; background-color: #F3F9FF; border-color: #0000E6;" cols="20" rows="34" name="issue" id = "issue" placeholder = "Enter Your Issue Here" "></textarea></form><br>
<div class = "word" style = "width: 50px; margin-left: auto; margin-right: auto">Priority:</div>
<div style = "width: 70px; margin-left: auto; margin-right: auto; padding: 2px">
<form action="BugReport.html" method="post">
<select class = "buttons" name = "priority" id = "priority">
<option value = "Low">Low</option>
<option value = "Regular" selected>Regular</option>
<option value = "High">High</option>
<option value = "Urgent">Urgent</option>
</select>
</form></div>
<div style = "width: 50px; margin-left: auto; margin-right: auto; padding: 2px">
<input class = "buttons" type ="submit" name = "sub" value = "Submit" id = "sub"></div>
<div id="result"></div>
</div>
</body>
</html>
