How to make the edit modal using ajax and php - php

Question

Im having problem when implementing edit function where I can edit the role of the user
Here is the button that will open the modal
<button type="button" id="edit" name="edit" class="btn btn-outline-warning" data-id="'.$row["id"].'">EDIT</button>
Here is the modal code
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="form-group">
<label for="userName" class="col-form-label">Username:</label>
<input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">
</div>
<div class="form-group">
<label for="user_type" class="col-form-label">User Type:</label>
<select class="form-control border-success" id="user_type">
<option value="user">User</option>
<option value="contributor">Contributor</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<input type="hidden" id="user_id" name="user_id">
<button type="submit" id="update" name="update" class="btn btn-success">Update</button>
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ajax
$(document).on('click', '#edit', function(){
var user_id = $(this).attr("data-id");
$.ajax({
url:"/auth/action",
method:"POST",
data:{user_id:user_id},
dataType:"json",
success:function(data)
{
$('#editModal').modal('show');
$('#userName').val(data.userName);
$('#user_type').val(data.user_type);
$('#user_id').val(user_id);
}
})
});
PHP where the action happens
if($_POST["action"] == 'update')
{
$query = 'UPDATE `users` SET username = :username, user_type = :user_type WHERE id = :id';
$statement = $connect->prepare($query);
$statement->execute(
array(
':id' => $_POST['user_id'],
':username' => $_POST['userName'],
':user_type' => $_POST['user_type']
)
);
$result = $statement->fetchAll();
if(isset($result))
{
echo '<div class="alert alert-fill-warning" role="alert">User type changed!<div>';
}
}
and also I have a function for fetch which I named it load_user_data()
Here is the for the datatype json
if(isset($_POST["user_id"]))
{
$output = array();
$statement = $connect->prepare(
"SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output["userName"] = $row["username"];
$output["user_type"] = $row["user_type"];
}
echo json_encode($output);
}
The problem Im having is that the PHP action code is not working or is there anything wrong with my code? but I dont have probelm with displaying the data in the modal except if i submit the change there is no function happening

Answer 1

Your ajax data property is missing a lot of parametars:
....ajax....
data: {user_id: user_id, userName: username here,user_type:set type here, action: 'update'}
You need to add edit id to your update button
Also you need to add userdata to your ajax response, currently you are using data.userName etc. but you didnt put that in the response
You can find more info on how to properly return json response here:
Returning JSON from a PHP Script

Answer 2

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="">
<div class="appenddata">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="update" name="update" class="btn btn-success">Update</button>
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', '#edit', function(){
$('#editModal').modal('show');
var user_id = $(this).attr("data-id");
$.ajax({
url:"/auth/action",
method:"POST",
data:{user_id:user_id},
success:function(data)
{
$(".appenddata)".html(data);
}
})
});
</script>
<?php
if(isset($_POST["user_id"]))
{
$output = array();
$statement = $connect->prepare(
"SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
);
$statement->execute();
$result = $statement->fetchAll();
$user_array=array("user","contributor");
?>
<input type="hidden" id="user_id" name="user_id" value="<?= $_POST["user_id"]; ?>">
<div class="form-group">
<label for="userName" class="col-form-label">Username:</label>
<input type="text" class="form-control border-danger" id="userName" value="<?= $result[0]['username']; ?>" readonly style="background-color: #2A3038">
</div>
<div class="form-group">
<label for="user_type" class="col-form-label">User Type:</label>
<select class="form-control border-success" id="user_type">
<?php
if($user_array!=NULL)
{
foreach($user_array as $data)
{
if($data==$result[0]['username'])
{
$selected='selected="selected"';
}
else
{
$selected='';
}
?>
<option value="<?= $data; ?>"><?= ucwords($data); ?></option>
<?php
}
}
?>
</select>
</div>
<?php
}