How to get data from JS prompt into php

Question

I have a mini-project to finish and I am facing a problem. I created a button to delete data from database and it works. But I want to add a prompt which asks for a password. I read that JavaScript is required. So I used this code:

echo
        "
        <script>
    var password=prompt('Please enter the password');
    $.ajax(
    {
        type: 'POST',
        url: '/test.php',
        data: password,
        success: function(data, textStatus, jqXHR)
        {
            console.log(data);
        }
    });
</script>
        ";
    
        if($_POST['data'] == "admin")
        {

The rest of the code doesn't matter. But it throws me this error: Uncaught ReferenceError: $ is not defined

Any solutions? I am new in PHP and I've never used JavaScript before:)

Answer 1

You will need to add a reference to jQuery before you use the $ operator.

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

Answer 2

You need to include jquery in your code. Just add this before your scripts.

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

Answer 3

You're trying to use the jQuery library, but haven't included the jQuery script necessary to run it. However, I would not recommend including an entire library to perform a single task.

Presumebly, your browser supports the Fetch API , which does the same as jQuery' $.ajax function, but natively. I would suggest that you learn how to use JavaScript without any libraries.

The example below shows how you should do this with the Fetch API. It sends a POST request with the password in an object. That object is transformed to JSON before being sent. JSON is a intermediate language that both JavaScript and PHP can understand, so it's a perfect way of communicating between two languages.

The request expects a response that is text based. Whenever a response is received it will print the received string to the console.

var password = prompt('Please enter the password');

fetch('/test.php', {
  method: 'POST',
  body: JSON.stringify({ // Send the object as JSON
    password: password
  })
})
.then(response => response.text()) // Decode the response as text.
.then(text => {
  console.log(text); // Log the received text.
});

On the PHP side, try to keep this logic in a seperate file. Your Fetch request will call the PHP file and the PHP file should send back a response.

The example below checks if the password key in the $_POST array exists. Because we converted our JavaScript object into JSON earlier, PHP is able to convert it into an assosiative array. So JS is effectively turned into PHP at this point.

Then check if the $password equals the admin string and return a string. This returned string will be sent back to client and processed as the response.

$password = $_POST['password'] ?? ''; // If the password key does not exist, use an empty string.

if ($password === 'admin') {
 return 'Password is admin';
} else {
 return 'Password is NOT admin';
}

die(); // Stop this file from running any further.