I display the list(Item, Category, and Job) from database in table and user can click the list on the table and the data will display in the text box. The user can add, update and delete the list in the text box. After that click the button that wants to function. In this php I decided do 2 functions which add dan update the list(Item, Category, and Job).
Finally i successful to update.
This is Updated code:
First I display 3 textboxes on the table. User can add the new list(Item, Category, Job) on the textbox. after that, user also can click the list on the another that I list all the data from my database on the 3 textbox as I show at the top position and change the list(Category and Job) on the textbox that wants to update.
<form id="form1" name="Checklist" method="post" action="Checklist2.php">
<table width="305" height="116" align="center" border="0">
<tr>
<td width="37%">Item : <br></td>
<td width="63%"><input type="text" name="Item" id="Item"></td>
</tr>
<tr>
<td>Category : </td>
<td>
<input type="text" name="Category" id="Category">
</td>
</tr>
<tr>
<td>Job : </td>
<td>
<input type="text" name="Job" id="Job">
</td>
</tr>
</table>
<div align="center">
<input type="image" value="submit" src="AddD.png" alt="submit Button" onmouseover="this.src='AddO.png'" onmouseout="this.src='AddD.png'" name="Add_btn" id="Add_btn">
<input type="image" value="submit" src="UpdateD.png" alt="submit Button" onmouseover="this.src='UpdateO.png'" onmouseout="this.src='UpdateD.png'" name="Update_btn" id="Update_btn">
<a href="DeleteChecklist2.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','Delete1O.png',1)">
<img src="Delete1D.png" name="Image3" width="145px" height="50px" border="0" name="Delete_btn" id="Delete_btn">
</a>
</div>
</form>
//This is the PHP code of add and delete button
<?php
try {
$con = new PDO("mysql:host=localhost;dbname=gcmes", "root", "");
if(isset($_POST['Add_btn'])) {
$Item = $_POST["Item"];
$Category = $_POST["Category"];
$Job = $_POST["Job"];
if(empty($Item)||empty($Category)||empty($Job)) {
echo "<script type='text/javascript'>alert('Please fill in the required fields to add!')</script>";
}
else {
$insert=$con->prepare("INSERT INTO details(Item,Category,Job) VALUES(:Item,:Category,:Job)");
$insert->bindParam(':Item',$Item);
$insert->bindParam(':Category',$Category);
$insert->bindParam(':Job',$Job);
$insert->execute();
echo "<script type='text/javascript'>alert('Successful Added ! '); window.location.href = 'Checklist2.php';</script>";
}//else
}//if addbutton
if(isset($_GET['Update_btn'])) {
$Item = $_GET['Item'];
$Category = $_GET['Category'];
$Job = $_GET['Job'];
if(empty($Category)||empty($Job)) {
echo "<script type='text/javascript'>alert('Please fill in the required fields to update!')</script>";
}
else {
$st=$con->prepare("UPDATE details SET Category = :Category, Job = :Job WHERE Item = :Item");
$st->bindParam(":Category",$Category);
$st->bindParam(":Job",$Job);
$st->bindParam(":Item",$Item);
$st->execute();
}//else
}//if updatebutton
}//try
catch(PDOException $e) {
echo "error".$e->getMessage();
}
?>
//This is the table list all the data from database
<table id="table" border="0" align="center">
<tr>
<th>No</th>
<th>Category</th>
<th>Job</th>
</tr>
<?php
try {
$con = new PDO("mysql:host=localhost;dbname=gcmes", "root", "");
$sql = $con->query("SELECT * FROM details");
foreach($sql as $row) {
$Item = $row["Item"];
$Category = $row["Category"];
$Job = $row["Job"];
echo'
<tr>
<td>' . $Item . '</td>
<td>' . $Category . '</td>
<td>' . $Job . '</td>
</tr>
';
}
echo"</table>";
}
catch(PDOException $e) {
echo "error".$e->getMessage();
}
?>
This is a script when user click the data at table(above code) will displayed in textbox :
<script>
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("Item").value = this.cells[0].innerHTML;
document.getElementById("Category").value = this.cells[1].innerHTML;
document.getElementById("Job").value = this.cells[2].innerHTML;
};
}
</script>
Thank you all!