Ajax modal keeps disappearing - php

Question

Here I have HTML, PHP and Jquery code with where I can edit all my record using the modal, the problem is that it keeps disappearing after I click on my update button, the modal only shows for about half a second. Can you help me? I'm actually new and just learning Jquery
this is the front view
<?php
include 'php/header.php';
require_once 'php/connect.php';
?>
<script>
$(document).ready(function(){
$("#input").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#body tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table, th, td {
border: 1px solid black;
color: black;
width: auto;
margin: auto;
}
td {
text-align: center;
}
.edit {
background-color: blue;
font-family: algerian;
color: lime;
border-radius: 30px;
}
.edit:hover {
cursor: pointer;
background-color: yellow;
color: black;
}
.delete {
color: white;
background: black;
font-family: algerian;
}
.delete:hover {
color: black;
background: yellow;
}
</style>
<h1 style=" font-family: algerian; color: lime" align="center">Assets</h1>
<div class="filter">
<input style="height: 23px; float: right;" id="input" type="text" placeholder="Search.." autocomplete="off"></div>
<br>
<br>
<table align="center">
<tr>
<a onclick="" href=""></a>
<thead>
<th>Asset Num</th>
<th>FA num</th>
<th>Employee</th>
<th>Team</th>
<th>Contractor</th>
<th>Status</th>
<th>Category</th>
<th>Disposed</th>
<th colspan="2">Actions</th>
</thead>
<tbody id="body">
<?php
$sql = " SELECT * FROM assets
LEFT JOIN team
ON assets.team_id = team.team_id
LEFT JOIN contractor
ON assets.contractor_id = contractor.contractor_id
LEFT JOIN employee
ON assets.employee_id = employee.employee_id
LEFT JOIN item_status
ON assets.status_id = item_status.status_id
LEFT JOIN category
ON assets.category_id = category.category_id
ORDER BY category ";
$result = mysqli_query($conn, $sql);
if ($result->num_rows> 0) {
while($row = $result->fetch_assoc())
{
if (empty($row["disposal_status_id"])) {
$row["disposal_status_id"] = "NO"; }
else {
$row["disposal_status_id"] = "YES";
}
echo "<tr>";
echo "<td>". $row["asset_num"] ."</td>" ;
echo "<td>". $row["fa_num"]."</td>";
echo "<td>". $row["first_name"]. " " .$row["last_name"]. "</td>";
echo "<td>". $row["team"]."</td>";
echo "<td>". $row["F_name"]."</td>";
echo "<td>". $row["item_status"]."</td>";
echo "<td>". $row["category"]."</td>";
echo "<td>". $row["disposal_status_id"] ."</td>";
echo "<td><form method='POST' id='form'><button name='edit' class='edit' value=". $row['assets_id'] . " >Update</button></form>";
echo "<td><a class='delete' onclick=\"return confirm('Are you sure you want to delete this record?')\"
href='php/delete_asset.php?id=".$row['assets_id']."'>Delete</a>";
echo "</tr>";
}
}
else {
echo "<p style='font-family: algerian; font-size: 30px; margin-left: 45%; color: yellow ' >No Record</p>";
}
?>
</tbody>
</table>
and this is the modal view
<script>
$(document).ready(function() {
$(".edit").click(function(){
$("#modal").css('display', 'block');
});
});
</script>
<script>
$(document).ready(function() {
$("#cancel").click(function(){
$("#modal").css("display", "none");
});
});
</script>
<script>
$(document).ready(function(){
$("#form").submit(function() {
var edit = $(this).val();
$.ajax({
type: "POST",
data: {edit:edit},
});
});
});
</script>
<?php
include 'php/connect.php';
$id = $_POST['edit'];
$d = mysqli_query($conn, " SELECT * FROM assets
LEFT JOIN employee
ON assets.employee_id = employee.employee_id
LEFT JOIN team
ON assets.team_id = team.team_id
LEFT JOIN contractor
ON assets.contractor_id = contractor.contractor_id
LEFT JOIN item_status
ON assets.status_id = item_status.status_id
LEFT JOIN category
ON assets.category_id = category.category_id
LEFT JOIN disposal_status
ON assets.disposal_status_id = disposal_status.disposal_status_id
WHERE assets_id = '$id'");
$check = mysqli_fetch_array($d);
function load_employee()
{
include 'php/connect.php';
$output = '';
$sql = "SELECT * FROM employee ORDER BY first_name";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)) {
$output .= "<option value='" . $row['employee_id'] ."'>"
. $row['first_name'] . " "
. $row['last_name'] . " </option>";
}
return $output;
}
?>
<div id="modal">
<script>
$(document).ready(function(){
$('#employee').change(function(){
var employee_id = $(this).val();
$.ajax({
url:"php/get_employee_team.php",
method: "POST",
data: {employee_id:employee_id},
dataType:"text",
success:function(data)
{
$('#team').html(data);
}
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="../mystyle.css">
<style>
#modal {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
</style>
<form method="POST" action="php/update_assets.php" >
<table align="center">
<th colspan="4" >Update Asset # <?php echo $check['assets_id']; ?></th>
<tr></tr>
<input style="display: none" type="text" name="assets_id" value="<?php echo $check['assets_id'] ?>">
<td>Asset Num:</td>
<td><input type="text" name="asset_num" value="<?php echo $check['asset_num'] ?>" autocomplete="off" required></td>
<td>Unit Condition:</td>
<td><input type="text" name="condition" value="<?php echo $check['condition'] ?>" autocomplete="off" ></td>
<tr></tr>
<td>FA Num:</td>
<td><input type="text" name="fa_num" value="<?php echo $check['fa_num'] ?>" autocomplete="off" required></td>
<td>Audit Date:</td>
<td><input type="date" name="audit" value="<?php echo $check['audit_date'] ?>" autocomplete="off"></td>
<tr></tr>
<tr>
<td>Employee:</td>
<td>
<select id="employee" name="employee" >
<?php
echo "<option value='" . $check['employee_id'] ."'>"
. $check['first_name'] . " "
. $check['last_name'] . " </option>";
?>
<option><?php echo load_employee(); ?></option>
</select>
</select></td>
<td>Location:</td>
<td><input type="text" name="location" value="<?php echo $check['location'] ?>" autocomplete="off"></td>
</tr>
<tr>
<td>Team:</td>
<td>
<select style="color: black" id="team" name="team" readonly>
<option value= "<?php echo $check['team_id'] ?>" ><?php echo $check['team'] ?></option>
</select>
</td>
<td>Insurance Date:</td>
<td><input type="date" name="insurance" value="<?php echo $check['audit_date'] ?>"></td>
</tr>
<td>Contractor:</td>
<td><select name="contractor">
<?php
echo "<option value='" . $check['contractor_id'] ."'>"
. $check['F_name'] . " "
. $check['L_name'] . " </option>";
?>
<option>
<?php
$sql = "SELECT * FROM contractor" ;
$result = mysqli_query($conn, $sql);
while ($row =mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['contractor_id'] ."'>"
. $row['F_name'] . " "
. $row['L_name'] . " </option>";
}
?>
</option>
</select> </td>
<td>Comments:</td>
<td><input style="overflow: scroll;" type="text" name="comments" value="<?php echo $check['comments'] ?>" autocomplete="off"></td>
<tr></tr>
<td>Status:</td>
<td><select name="status">
<?php
echo "<option value='" . $check['status_id'] ."'>"
. $check['item_status'] . " </option>";
?>
<option>
<?php
$sql = "SELECT * FROM item_status " ;
$result = mysqli_query($conn, $sql);
while ($row =mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['status_id'] ."'>"
. $row['item_status'] . " </option>";
}
?>
</option>
</select>
</td>
<td colspan="2"> <br></td>
<tr></tr>
<td>Asset Category:</td>
<td>
<select name="category">
<?php
echo "<option value='" . $check['category_id'] ."'>"
. $check['category'] . " </option>";
?>
<option>
<?php
$sql = "SELECT * FROM category" ;
$result = mysqli_query($conn, $sql);
while ($row =mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['category_id'] ."'>"
. $row['category'] . " </option>";
}
?>
</option>
</select>
</td>
<td colspan="2"> <br></td>
<tr></tr>
<td>Description:</td>
<td><input type="text" name="description" value="<?php echo $check['description'] ?>" autocomplete="off">
<td colspan="2" style="text-align: center; color: blue; font-family: algerian" >DISPOSAL DETAILS</td>
<tr></tr>
<td>Serial Number:</td>
<td><input type="text" name="serial" value="<?php echo $check['serial_num'] ?>" autocomplete="off"></td>
<td>Disposal Location</td>
<td><input type="text" name="disposal_loc" value="<?php echo $check['disposal_location'] ?>" autocomplete="off"></td>
<tr></tr>
<td>Date Aquired:</td>
<td><input type="date" name="acquired" value="<?php echo $check['date_get'] ?>" autocomplete="off"></td>
<td>Date Disposed</td>
<td><input type="date" name="disposal_date" value="<?php echo $check['disposal_date'] ?>" autocomplete="off"></td>
<tr></tr>
<td>Purchase Price:</td>
<td><input type="text" name="price" value="<?php echo $check['purchase_price'] ?>" autocomplete="off"></td>
<td>Disposed Status</td>
<td>
<select id="dept" name="disposal_status">
<?php
if ($check['disposal_status_id'] == 0) {
echo "<option value='". $checl['disposal_status_id'] ."' >";
echo "NOT YET";
echo "</option>";
}
?>
<?php
$sql = "SELECT * FROM disposal_status " ;
$result = mysqli_query($conn, $sql);
while ($row =mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['disposal_status_id'] ."'>"
. $row['status'] . " </option>";
}
?>
</select>
</td>
<tr></tr>
<br>
<td style="text-align: center;" colspan="4"><button type="submit" name="btn" class="submit" >Submit</button>
<p class="submit" id="cancel">Cancel</p></form>
</td>
</table>
</div>
I try to send the data in the same page and try to change the CSS code when I click on the Update button, sending the id and fetching the data required using ajax Jquery, Hope someone can help me, thanks in advance

Answer 1

I think you need to use preventDefault() function because the nature of submiting form is to refresh the page that's also the reason why the modal is appearing just a couple of seconds only or sometimes it is not appearing.
Please try these line of code.
$("#form").on("submit",function(event) {
event.preventDefault();
var edit = $(this).val();
$.ajax({
type: "POST",
data: {edit:edit},
});
});
});