iRuemu Coding Blog
Sending Data to a Database Without Page Refresh with AJAX and PHP

Photo by Ian Schneider on Unsplash

Sending Data to a Database Without Page Refresh with AJAX and PHP

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

3 min read

Table of contents

In web development, it's often necessary to collect user data and store it in a database. Traditionally, this process required the entire web page to be refreshed, causing a less-than-ideal user experience. However, with AJAX (Asynchronous JavaScript and XML), we can send data to a database without refreshing the page, creating a smoother and more interactive user interface.

In this tutorial, we'll explore how to achieve this using JavaScript, AJAX, and PHP. We'll also cover error handling to ensure that data is submitted successfully.

Prerequisites

Before we start, make sure you have the following:

  • A web server environment (e.g., Apache, PHP, MySQL)

  • Basic knowledge of HTML, JavaScript, and PHP

Include jQuery (Optional): You can use the jQuery library to simplify the AJAX code. Include it in your HTML if you're not already using it:

htmlCopy code<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTML Form

Let's begin by creating a simple HTML form to collect user data. In this example, we'll collect the user's name and email.

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <button type="button" id="submitBtn">Submit</button>
</form>

<div id="responseMessage"></div>

JavaScript and AJAX

Next, we'll use JavaScript and AJAX to send the form data to the server without a page refresh. We'll also handle error messages. Here's the JavaScript code:

$(document).ready(function () {
    $("#submitBtn").click(function () {
        // Serialize the form data
        var formData = $("#myForm").serialize();

        // Send an AJAX request to the server
        $.ajax({
            type: "POST",
            url: "process.php", // Replace with your server-side script URL
            data: formData,
            success: function (response) {
                // Update the response element with the server's response
                $("#responseMessage").text(response);

                // Clear the input fields
                $("#name").val("");
                $("#email").val("");

                // Fade out the response message after 10 seconds
                $("#responseMessage").fadeOut(10000);
            }
        });
    });
});

PHP Server-Side Script (process.php)

Now, let's create the PHP server-side script (process.php) to handle the form data, insert it into the database, and perform error handling.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Check if the email and name fields are empty
    if (empty($_POST["email"]) || empty($_POST["name"])) {
        echo "Error: Please fill in both the name and email fields.";
        exit; // Stop script execution
    }

    // Establish a database connection (replace with your database info)
    $servername = "localhost";
    $username = "your_username";
    $password = "your_password";
    $dbname = "your_database_name";

    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check the connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Handle the form data (replace with your form field names)
    $name = $_POST["name"];
    $email = $_POST["email"];

    // Check if the email or name already exists in the database
    $checkQuery = "SELECT * FROM your_table_name WHERE name = '$name' OR email = '$email'";
    $checkResult = $conn->query($checkQuery);

    if ($checkResult->num_rows > 0) {
        echo "Error: The email or name already exists in the database.";
    } else {
        // Insert data into the database (replace with your SQL query)
        $sql = "INSERT INTO your_table_name (name, email) VALUES ('$name', '$email')";

        if ($conn->query($sql) === TRUE) {
            echo "Record inserted successfully!";
        } else {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }
    }

    // Close the database connection
    $conn->close();
} else {
    echo "Invalid request.";
}
?>

Conclusion

By following this tutorial, you've learned how to send data to a database without refreshing the page using AJAX and PHP. You've also implemented error handling to ensure a smooth user experience. This technique is crucial for creating dynamic and interactive web applications while maintaining user data integrity.

Remember to customize the code to fit your specific needs, including database credentials and table names. With these tools at your disposal, you can build more responsive and user-friendly web applications.

AjaxjQueryPHPJavaScriptDatabases