How to get an php echo with jquery

Question

I know this question was asked many times before, I searched really long for the solution but I couldn'd find one, that's why I'm asking. First: I'm trying to connect my HTML-File to my JavaScript file and that worked pretty well. What I want to do now is to display data from my MySql-DB on my HTML-Site, that's why I'm using PHP. I wanted to start simple, that's why I tried to echo "Hello World". But when I run my site, I don't get only "Hello World", I'm getting the whole PHP-Code. How can I fix that problem?

test.php

<?php
echo 'Hello World';

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>MySite</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
      <input type="text" id="size">
      <button id="saveBtn" value="Click" type="button" >Save</button>
      <script src='test.js'></script>
    </body>
</html>

test.js

window.addEventListener("load", function () {
    $('button#saveBtn').on('click', function () {
        var in= $('input#size').val();
        if (size== '')
            alert("Error");
        else {
            $.post("test.php", { input: size}, function (data, status) {
                alert("data + " : " + status);
            });
        }
    });
});

Does this answer your question? PHP code is not being executed, instead code shows on the page — Anurag Srivastava
– Anurag Srivastava, Commented Mar 31, 2020 at 0:50
No not really, I don't think I have a problem with the configuration, because I used PHP before and it worked well, so I assume there is an error in my code. — ForStudy007
– ForStudy007, Commented Mar 31, 2020 at 1:31

Ludolfyn · Accepted Answer · 2020-03-31 08:06:47Z

Everything is actually working fine, except you have some typos in your Javascript file:

You can't use the word in as a variable name, because it is reserved as a Javascript keyword.
The second parameter that you had on the $.post() function is illegal.
The way you concatenated the message in the alert was faulty.

It should look like this to work:

window.addEventListener("load", function () {
    $('button#saveBtn').on('click', function () {
        var theInput = $('input#size').val();
        if (size== '')
            alert("Error");
        else {
            $.post("test.php", function (data, status) {
                alert(data + ":" + status);
            });
        }
    });
});

ALSO

It looks like you're trying to prevent the user from sending off the AJAX request until there is something in the input. If this is what you are trying to do then you can do it like this:

window.addEventListener("load", function () {
    $('button#saveBtn').on('click', function () {
        var theInput = $('input#size').val();
        if (!theInput.length) // Checking to see if there's something in the input
            alert("Error");
        else {
            $.post("test.php", function (data, status) {
                alert(data + ":" + status);
            });
        }
    });
});

NOTE: It's important to note that in order for your PHP to run at all, you need to set up a local server (This might be why you are getting PHP errors). You can do that by either installing XAMPP or you can follow these instructions.

Collectives™ on Stack Overflow

How to get an php echo with jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related