PHP Ajax Update MySQL Data Through Bootstrap Modal - php

Question

I want to update my database using php ajax modal. When updating the relevant field { $('#main_id').val(data.id); } don't pass an id to the update query therefor an insertion occurs without executing the updating query.
console log details when trying to update
I tried to solve this but I couldn't. without updating the existing data it inserts a new record
here is my index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
$query = "SELECT * FROM tbl_main_category ORDER BY cat_Id DESC";
$result = mysqli_query($connect, $query);
?>
<div id="employee_table">
<table class="table table-bordered">
<tr> <th width="70%">Employee id</th>
<th width="70%">Employee Name</th>
<th width="15%">Edit</th>
<th width="15%">View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr> <td><?php echo $row["cat_Id"]; ?></td>
<td><?php echo $row["category_name"]; ?></td>
<td><input type="button" name="edit" value="Edit" id="<?php echo $row["cat_Id"]; ?>" class="btn btn-info btn-xs edit_data" /></td>
<td><input type="button" name="view" value="view" id="<?php echo $row["cat_Id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</body>
</html>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Employee Name</label>
<input type="text" name="category_name" id="category_name" class="form-control" />
<br />
<input type="hidden" name="main_id" id="main_id" />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#insert').val("Insert");
$('#insert_form')[0].reset();
});
$(document).on('click', '.edit_data', function(){
console.log('test')
var main_id = $(this).attr("id");
console.log(main_id)
$.ajax({
url:"fetch.php",
method:"POST",
data:{main_id:main_id},
dataType:"json",
success:function(data){
console.log(data)
$('#category_name').val(data.category_name);
console.log(data.category_name)
$('#main_id').val(data.id);
console.log(data.id)
$('#insert').val("Update");
$('#add_data_Modal').modal('show');
}
});
});
insert.php
<?php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
if(!empty($_POST))
{
$output = '';
$message = '';
$category_name = mysqli_real_escape_string($connect, $_POST["category_name"]);
if($_POST["main_id"] != '')
{
$query = "
UPDATE tbl_main_category
SET category_name='$category_name' WHERE cat_Id='".$_POST["main_id"]."'";
$message = 'Data Updated';
}
else
{
$query = "
INSERT INTO tbl_main_category(category_name)
VALUES('$category_name');
";
$message = 'Data Inserted';
}
fetch.php
<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "ohmsp");
if(isset($_POST["main_id"]))
{
$query = "SELECT * FROM tbl_main_category WHERE cat_Id = '".$_POST["main_id"]."'";
$result = mysqli_query($connect, $query);
$row = mysqli_fetch_array($result);
echo json_encode($row);
}
?>

Answer 1

You have Fetched the value from $('#main_id').val(data.id) instead of $('#main_id').val(data.cat_Id);
You have fetched value of id instead of cat_Id