So basically I have a table of employee basic information. It already has values that are retrieved from the mysql database. employee basic information table . So, as you can see on the table, it has an edit button in the upper right corner. After clicking, a modal dialog will appear. edit basic information modality .
My problem is that I do not know how to update records in the base information table after the user has filled in the fields on the edit form and clicked the save button.
What I want to do is when the user clicks the save button in the modal dialog, he will automatically change the existing data in the table to the updated one, there is no need to reload the page.
This means that ajax or jquery is required to refresh parts of a web page - without reloading the entire page, which I don’t know how it works.
Here is my code for the table:
<br>
<button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal1">Edit</button>
<div class="clear text-primary bold"><i class="fa fa-user text-primary"></i> Basic Information </div>
<br>
<section class="padder-v">
<table class="table table-responsive">
<tbody>
<tr>
<th>
<strong> Employee ID</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['emp_code']; ?></p>
</td>
<th>
<strong> Birthdate</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['birthdate']; ?></p>
</td>
</tr>
<tr>
<th>
<strong> Last Name</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['lname']; ?></p>
</td>
<th>
<strong> Gender</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['gender']; ?></p>
</td>
</tr>
<tr>
<th>
<strong> First Name</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['fname']; ?></p>
</td>
<th>
<strong> Marital Status</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['status']; ?></p>
</td>
</tr>
<tr>
<th>
<strong>Middle Name</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['mname']; ?></p>
</td>
<th>
<strong> Active</strong>
</th>
<td>
<p class="text-muted"><?php echo $_SESSION['active']; ?></p>
</td>
</tr>
</tbody>
</table>
</section>
Code for php script:
<?php
if(isset($_POST['submit'])){
$firstname = $_POST['emp_fname'];
$middlename = $_POST['emp_mname'];
$lastname = $_POST['emp_lname'];
$birthdate = $_POST['emp_bday'];
$gender = $_POST['emp_gender'];
$maritalstatus = $_POST['emp_maritalstatus'];
$query = $mysqli->query("UPDATE tbl_employee SET emp_fname = '$firstname',
emp_mname = '$middlename',
emp_lname = '$lastname',
emp_bday = '$birthdate',
emp_gender = '$gender',
emp_maritalstatus = '$maritalstatus',
WHERE emp_id = '$emp_code'");
if($query){
?>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Success!</strong> You Added a New Borrower!
</div>
<?php } else{ ?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Danger!</strong> Something wrong with the Process!
</div>
<?php
}
}
?>
Code for modal:
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> <i class="fa fa-user text-primary"></i> Basic Information</h4>
</div>
<div class="modal-body">
<form method="post" >
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="emp_fname">First Name</label>
<input type="text" class="form-control" id="emp_fname" name="emp_fname" value ="<?php echo $_SESSION['fname']; ?>" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="emp_bday">Birthdate </label>
<input type="text" class="form-control" id="emp_bday" name="emp_bday" value="<?php echo $_SESSION['birthdate']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="emp_mname">Middle Name </label>
<input type="text" class="form-control" id="emp_mname" name="emp_mname" value="<?php echo $_SESSION['mname']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="emp_gender">Gender</label><br>
<select class="form-control" name="emp_gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="emp_lname">Last Name </label>
<input type="text" class="form-control" id="emp_lname" name="emp_lname" value="<?php echo $_SESSION['lname']; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="emp_maritalstatus">Marital Status</label><br>
<select class="form-control" name="emp_maritalstatus">
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
<option>Separated</option>
<option>Widowed</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button id = "submit" type="submit" class="btn btn-success" name="submit">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
source
share