Hey guys, I'm trying to reupdate a web application that I have going on right now. Originally, I had a php page connect to a database and have a dropdown menu with the list of user id's. When you select the user id, you can submit it and you will be sent to another php page that has that user's information on there so that you can update the information if necessary.
Now, what I'm trying to do is implement Ajax into the first page so that when you select the user, the information will be shown below where you can update the information on the same page without having to refresh or anything like that. So far, I am able to display the information but can't click the update button to make the changes final, but yet the cancel button is still able to refresh the page. Any help would be great as I'm learning and trying to figure out ways to do this.
Heres the code for both php files.
<!DOCTYPE html> <html> <head> <script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","sqlPage2.php?q="+str,true);
xmlhttp.send();
}
}
</script> </head> <body> <?php
//This is after you make any changes to the information
//for the choice selected from the next page
//You will not see the change on this page, but will see it on the next page
//once you go back on it and the change will also appear within the database
if(isset($_POST['update']))
{
$EmployeeID = $_POST['EmployeeID'];
//These are the inputs that will be updated
$FirstName = $_POST['FirstName'];
$LastName = $_POST['LastName'];
$Extension = $_POST['Extension'];
$Telephone = $_POST['Telephone'];
$Email = $_POST['Email'];
$PPhone = $_POST['PersonalPhone'];
$MPhone = $_POST['Mobile'];
$TeleAgent = $_POST['TelephoneAgent'];
//The SQL command to update the above
$sql2 = "UPDATE engineers SET FirstName = '$FirstName', LastName= '$LastName', Extension='$Extension', Telephone='$Telephone', Email='$Email', PersonalPhone='$PPhone', Mobile='$MPhone', TelephoneAgent='$TeleAgent' WHERE EmployeeID='$EmployeeID'";
//The result of the command will be saved here and will update the database
$res = mysqli_query($conn, $sql2);
}
?> <?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'DBASE';//changed for personal purposes
//create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if(!$conn)
{
die("Connection Failed: " . mysqli_connect_error());
}
//lets you know that connection is successful
echo "Connected Successfully". "<br>";
//sql command to select parts of a table from the database and then sort them
$sql = "SELECT UserID from engineers group by UserID";
//The results are stored here
$result = mysqli_query($conn, $sql);
//Http lines of code in php syntax since we are using php after all
echo "<h1>". "SALES ENGINEERS". "</h1>";
echo "<form action = " ."'sqlPage2.php'". "method= 'post'>";
echo "Select the User that you want to Update <br><br>";
echo "User ID: ";
echo "<select name='engineers'". "onchange='showUser(this.value)'>";
echo "<option value='User ID'". ">". 'Drop down from SE list'. "</option>";
//This will go through every entry in the table from the database
//and then put all the found entries in the dropdown menu.
while($row = mysqli_fetch_array($result))
{
//makes the entry visible in the dropdown menu
echo "<option value='". $row['UserID']."'>". $row['UserID']. "</option>";
}
echo "</select>";
echo "<br><br>";
//echo "<input type = ". "'submit'". "value =". "'Submit'/>";
echo "<input type = 'submit' value = 'Submit'/>";
echo "</form>";
//closes the connection to the database
mysqli_close($conn);
?> <div id="txtHint"><b>Engineer info will be listed here...</b></div> </body> </html>
Second file
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'DATABASE'; //changed for personal purposes
//create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
//check connection
if(!$conn)
{
//will tell you if the connection failed
die("Connection Failed: " . mysqli_connect_error());
}
//Checks the previous page for the choice selected from the Dropdown menu
$q = ($_GET['q']);
//if(isset($_POST['engineers']))
{
//SQL command to pull information from the table where Sales Engineers are
$sql = "SELECT * FROM engineers where UserID= '".$q."'";
//The result is saved here
$result = mysqli_query($conn, $sql);
//Will fetch the information
//Slightly redundant since we will only be selecting only one
//entry at a time
while($row = mysqli_fetch_array($result))
{
$EmployeeID = $row["EmployeeID"];
$FirstName = $row["FirstName"];
$LastName = $row["LastName"];
$Extension = $row["Extension"];
$Telephone = $row["Telephone"];
$Email = $row["Email"];
$PPhone = $row["PersonalPhone"];
$MPhone = $row["Mobile"];
$TeleAgent = $row["TelephoneAgent"];
}
}
//Closes the connection
mysqli_close($conn);
?> <html> <body> <table style="color:purple;border-style:groove; height:150px;width:350px"> <form action ="sqlPage2.php" id="updateInfo" method = "post" onsubmit="return confirm('Are you sure you want to make these changes?')"> <td> <!-- This will be hidden so that the user cannot change the value of the EmployeeID since
that is a permanent thing
--> <input type="hidden" input name="EmployeeID" value ='<?php echo $EmployeeID;?>'/> </td> <tr> <!-- These next few lines will print out the textboxes of the selected UserID from the previous page --> <td style="color:red;background-color:aqua;" class="auto-style3">First Name:</td> <td class="auto-style4"> <input name="FirstName" type="text" value='<?php echo $FirstName; ?>'/> </td> </tr> <br><br> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Last Name:</td> <td class="auto-style4"> <input name="LastName" type="text" value='<?php echo $LastName; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Extension:</td> <td class="auto-style4"> <input name="Extension" type="text" value='<?php echo $Extension; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Telephone:</td> <td class="auto-style4"> <input name="Telephone" type="text" value='<?php echo $Telephone; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Email:</td> <td class="auto-style4"> <input name="Email" type="text" value='<?php echo $Email; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Personal Phone:</td> <td class="auto-style4"> <input name="PersonalPhone" type="text" value='<?php echo $PPhone; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Mobile:</td> <td class="auto-style4"> <input name="Mobile" type="text" value='<?php echo $MPhone; ?>'/> </td> </tr> <tr> <!-- Same as above --> <td style="color:red;background-color:aqua;" class="auto-style3">Telephone Agent:</td> <td class="auto-style4"> <input name="TelephoneAgent" type="text" value='<?php echo $TeleAgent; ?>'/> </td> </tr> <!-- This will be the button you press to finalize the updated information for that selected Sales Engineer --> <td style="color:red;background-color:aqua;" class="auto-style3">
<input name="update" input type="submit" value="Update" style="color:white;background-color:brown; height:30px" /> </td> </form> <!-- Will refresh the page so that you can undo any changes that you have made if necessary --> <form action="sqlPage2.php"> <td style="color:red;background-color:aqua;" class="auto-style3">
<A HREF="javascript:history.go(0)"></A> <INPUT TYPE="button" onClick="history.go(0)" VALUE="Cancel" style="color:white;background-color:brown; height:30px" /> </td> </form> </table> </body> </html>