Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Im having some issues with Json and PHP on HTML website

jailduck

jailduck

New Coder
Im working on website that is linked to phpmyadmin database. the goal of this is to allow users to input data, search the data and display it and delete a record. these records being information for clients. but I'm having issues with the data being inserted into the database using the front end. this is my error. i would also like to point out that i am not getting any errors on my IDE and i have xxamp running while attempting this project. xxamp is running both MySQL and apache services, xxamp is running as administrator.
1717477626853.png

VM327:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<br />
<b>"... is not valid JSON

i am using VS code IDE and so far i have 1html file, 1js file, 5php files and a CSS file

HTML is my main interface
js passes the function from PHP to my HTML
my 5php files are:
  • database connection
  • delete function
  • Search function
  • insert function
  • functions (in this one i declared what search, delete and insert do)

i also would like to mention that i am fairly new to programming so i may not understand more advanced terms or simple terms. if you guys want to see my source code i will gladly send it. If anyone can help with this i would greatly appreciate it. thank you guys in advance

1717477419236.png
 
Sort by date Sort by votes
Hey thanks for the reply. but i have been reviewing my code and i dont see an instance of where i used this tag. i know it cant be in my PHP because i read it it doesn't serve well. but the only places i have <br> tags or something similar to that are in my HTML and js. please have a look .

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visitor Management</title>
    <link rel="stylesheet" href="design.css">
</head>
<body>
    <h1>Client Management</h1>
    <form id="visitorForm">
        <input type="text" name="full_name" placeholder="Full Name" required>
        <input type="text" name="purpose_of_visit" placeholder="Purpose of Visit" required>
        <input type="text" name="phone_number" placeholder="Phone Number" required>
        <input type="date" name="todays_visit" required>
        <input type="date" name="next_visit">
        <input type="number" step="0.01" name="amount_paid" placeholder="Amount Paid" required>
        <button type="submit">Add Visitor</button>
    </form>
    <input type="text" id="searchInput" placeholder="Search visitors">
    <div id="visitorList"></div>
    <script src="script.js"></script>
</body>
</html>
the above is the index html

below is the js
JavaScript: 
document.getElementById('visitorForm').addEventListener('submit', function (e) {
    e.preventDefault();

    let formData = new FormData(this);
    fetch('insert.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            alert('Visitor added successfully');
            this.reset();
            loadVisitors();
        } else {
            alert('Failed to add visitor');
        }
    });
});

document.getElementById('searchInput').addEventListener('input', function () {
    let query = this.value;
    fetch(`search.php?query=${query}`)
    .then(response => response.json())
    .then(data => {
        displayVisitors(data);
    });
});

function loadVisitors() {
    fetch('search.php?query=')
    .then(response => response.json())
    .then(data => {
        displayVisitors(data);
    });
}

function displayVisitors(visitors) {
    let visitorList = document.getElementById('visitorList');
    visitorList.innerHTML = '';
    visitors.forEach(visitor => {
        let visitorItem = document.createElement('div');
        visitorItem.innerHTML = `
            <div>
                <strong>${visitor.full_name}</strong>
                <p>Purpose: ${visitor.purpose_of_visit}</p>
                <p>Phone: ${visitor.phone_number}</p>
                <p>Today's Visit: ${visitor.todays_visit}</p>
                <p>Next Visit: ${visitor.next_visit}</p>
                <p>Amount Paid: ${visitor.amount_paid}</p>
                <button onclick="deleteVisitor(${visitor.id})">Delete</button>
            </div>
        `;
        visitorList.appendChild(visitorItem);
    });
}

function deleteVisitor(id) {
    if (confirm('Are you sure you want to delete this visitor?')) {
        fetch('delete.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id: id })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('Visitor deleted successfully');
                loadVisitors();
            } else {
                alert('Failed to delete visitor');
            }
        });
    }
}

// Load initial visitor list
loadVisitors();

thanks in advance.
 
Last edited by a moderator:
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
No. this is how that looks
PHP: 
<?php
include 'functions.php';

// Check if the "query" parameter is set in the URL
if (isset($_GET['query'])) {
    $query = $_GET['query'];

    // Call the searchVisitors function with the provided query
    $results = searchVisitors($query);

    // Return the search results as JSON
    echo json_encode($results);
} else {
    // If the "query" parameter is not set, return an error response
    echo json_encode(['error' => 'Query parameter is missing']);
}
?>
 
Last edited by a moderator:
Upvote 0 Downvote
You can verify in the Network tab of the dev inspector the output of your http request. I am pretty sure you will see that the response is not just JSON. It also includes HTML from a PHP error.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom