How can AJAX be utilized to improve the user experience when deleting a record from a select box in PHP?

Issue: When deleting a record from a select box in PHP, the page typically needs to reload to reflect the changes, causing a disruption in the user experience. To improve this, we can utilize AJAX to delete the record without refreshing the page, providing a smoother and more seamless user experience. 

<?php
// PHP code to delete a record from a select box using AJAX

if(isset($_POST['delete_record'])) {
    $record_id = $_POST['record_id'];

    // Code to delete the record from the database

    // Return success message
    echo json_encode(['message' => 'Record deleted successfully']);
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Delete Record</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <select id="record_select">
        <option value="1">Record 1</option>
        <option value="2">Record 2</option>
        <option value="3">Record 3</option>
    </select>

    <button id="delete_button">Delete Record</button>

    <script>
        $(document).ready(function() {
            $('#delete_button').click(function() {
                var record_id = $('#record_select').val();

                $.ajax({
                    type: 'POST',
                    url: 'delete_record.php',
                    data: { delete_record: true, record_id: record_id },
                    success: function(response) {
                        var data = JSON.parse(response);
                        alert(data.message);
                        // Code to remove the deleted record from the select box
                    },
                    error: function() {
                        alert('Error deleting record');
                    }
                });
            });
        });
    </script>
</body>
</html>

Keywords

AJAX user experience record deletion select box PHP

Related Questions