I will start off by saying I am new to coding so i find this very difficult, also i have asked a few questions recently, mainly because i am REALLY STUCK, so all help is really appreciated.
I have two tables. Employee (Employee_ID, First_name, Last_name, Address etc) and Training (Training_ID, Employee_ID, First_name, Last_name, Training_type).
For the training table, I have a form in which is meant to be filled out to assign a training type for an employee.
OK currently, the dropdown box,for employee ID, has the values of the employee ID from the employee table.
When i chose a value from the drop down box, i would like for the text fields in the form (firstname & Lastname) to update showing the names for that employee_id. I have searched online but have NO idea how to do this.
Below shows my form (php)
<html>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("hrmwaitrose", $con);
?>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<title>Training</title>
</head>
<body>
<div id="content">
<h1 align="center">Add Training</h1>
<form action="inserttraining.php" method="post">
<div>
<p>Training ID: <input type="text" name="Training_ID"></p>
<p>Employee ID:<select id="Employee_ID">
<?php
$result = mysql_query("SELECT Employee_ID FROM Employee");
while ($row = mysql_fetch_row($result)) {
echo "<option value=$row[0]>$row[0]</option>";
}
?>
</select>
<p>First name: <input type="text" name="First_name"></p>
<p>Last name: <input type="text" name="Last_name"></p>
<p>
Training required?
<select name="Training">
<option value="">Select...</option>
<option value="Customer Service">Customer Service</option>
<option value="Bailer">Bailer</option>
<option value="Reception">Reception</option>
<option value="Fish & meat counters">Fish & meat counters</option>
<option value="Cheese counters">Cheese counters</option>
</select>
</p>
<input type="submit">
</form>
</div>
</body>
</html>
And here is my php code for when the submit button is pressed.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("hrmwaitrose", $con);
$sql="INSERT INTO training (Training_ID, Employee_ID, First_name, Last_name, Training)
VALUES
('$_POST[Training_ID]','$_POST[Employee_ID]','$_POST[First_name]','$_POST[Last_name]','$_POST[Training]')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($con);
?>
I think its done by java? not too sure.
Your view file:
<?php
// First of all, don't make use of mysql_* functions, those are old
$pdo = new PDO("mysql:host=localhost;dbname=hrmwaitrose;charset=utf8", "root", "");
?>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- You will need jQuery (or anyother javascript framework) to accomplish your goal cause you need ajax -->
<title>Training</title>
</head>
<body>
<div id="content">
<h1 align="center">Add Training</h1>
<form action="inserttraining.php" method="post">
<div>
<p>
Training ID:
<input type="text" name="Training_ID">
</p>
<p>
Employee ID:
<select id="Employee_ID">
<option value="">Select one</option>
<?php
$st = $pdo->prepare("SELECT Employee_ID FROM Employee");
$st->execute();
$rows = $st->fetchAll(PDO::FETCH_ASSOC);
foreach ($rows as $row) {
?><option value="<?php echo $row ['Employee_ID']; ?>"><?php echo $row ['Employee_ID']; ?></option><?php
}
?>
</select>
<p>
First name:
<input type="text" name="First_name" id="First_name">
</p>
<p>
Last name:
<input type="text" name="Last_name" id="Last_name">
</p>
<p>
Training required?
<select name="Training">
<option value="">Select...</option>
<option value="Customer Service">Customer Service</option>
<option value="Bailer">Bailer</option>
<option value="Reception">Reception</option>
<option value="Fish & meat counters">Fish & meat counters</option>
<option value="Cheese counters">Cheese counters</option>
</select>
</p>
<input type="submit">
</form>
</div>
<script type="text/javascript">
$(function() { // This code will be executed when DOM is ready
$('#Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
var $self = $(this); // We create an jQuery object with the select inside
$.post("getEmployeeData.php", { Employee_ID : $self.val()}, function(json) {
if (json && json.status) {
$('#First_name').val(json.name);
$('#Last_name').val(json.lastname);
}
})
});
})
</script>
</body>
</html>
Your getEmployeeData.php file:
<?php
$pdo = new PDO("mysql:host=localhost;dbname=hrmwaitrose;charset=utf8", "root", "");
header("Content-Type:application/json; Charset=utf-8");
// As you can see, here you will have where Employee_ID = :employee_id, this will be
// automatically replaced by the PDO object with the data sent in execute(array('employee_id' => $_POST['Employee_ID']))
// This is a good practice to avoid SqlInyection attacks
$st = $pdo->prepare("SELECT First_name, Last_name FROM Employee WHERE Employee_ID = :employee_id");
$st->execute(array ('employee_id' => $_POST['Employee_ID']));
$data = $st->fetch(PDO::FETCH_ASSOC);
echo json_encode(array ('status' => true, 'name' => $data ['First_name'], 'lastname' => $data ['Last_name']));
Some last suggestions: indent the code correctly. Close every html tag (<input /> for example)
In a simple way, you hav to implement a little ajax method (with jQuery for example) who will be triggered on the onchange attribute of your dropdown list.
$('select').change(function() {
var choice = jQuery(this).val();
$.ajax({
url:'fakeurl.test.php',
type:'POST'
data : {'id' : choice},
success : function(response) {
$('input[name="First_name"]').val(response.firstname);
$('input[name="Last_name"]').val(response.lastname);
}
});
});
And of course, in your PHP
$id = $_POST['id'] ;
SELECT...WHERE employee_id = $id...
[...]
return json_encode(array(
'lastname'=>$employee_lastname,
'firstname'=>$employee_firstname
));