Passing a PHP variable with fetched data to a JavaScript variable returns NULL or empty

Question

I have an issue with returning the value of a PHP variable in JS. It returns NULL or empty instead of returning the age.

Approach:

Passing PHP variable with data to a JS variable in a separate file. Display JS variable in an alert(). Data was fetched from the database using fetch_assoc() in a while loop. Without using Ajax!

Proposed plan:

Enter a name.
Submit.
PHP fetches the age associated with that name.
age is stored in a PHP variable dbage.
Passed into JS variable to alert user what their age is.

I am trying to pass $dbage from sampletest.php to user in sample.php which will onsubmit display an alert saying: "Your age is blah".

blah is $dbage, which contains the age. This is for testing. Once I understand why this isn't working, I can move on to sending these JS variables to functions that will do calculations and return back to the DB.

What I have tried so far..

Trying to catch echo using ob_start() but that returned NULL as well.

Example:

   ob_start();
   echo $dbage;
   $output = ob_get_contents();
   ob_end_clean();

Making $dbage a global variable. Returns empty.

Echo variable outside the while loop but that returned NULL.

Example:

    $dbage = '';
    while( $row = $result->fetch_assoc()) {
        $dbage = $row['age'];
    }
    echo $dbage;

Any suggestions, corrections are appreciated.

sample.php (index file)

<?php
include 'sampletest.php';
session_start();    
?>

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<body>
     <div id="id03">
      <form class="modal-content" action="sampletest.php" method="post" onsubmit="myFunction()">
        <div class="container">
          <input type="text" id="name" placeholder="Enter name"  name="name">
            <div class="clearfix">
            <button type="submit" class="loggedinbtn" name="load"/>Load
          </div>
        </div>
      </form>
    </div>    

    <script>
    function myFunction() {
        var user = '<?php echo(json_encode($dbage)); ?>';
        alert("This is a php varible " + user);
    }
    </script>
    </body>
</html>

sampletest.php

if(isset($_POST['load'])){
    require 'config.php';
    $name = $_POST['name'];
    $age = $_POST['age'];
    if(empty($name)) {
        echo "Enter a number";
    }elseif(!preg_match('/^[a-z ]+$/i', $name)){
        echo "Enter a letter, no numbers";
    }else{
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
            header("location: sample.php?Connect-database=failed");
            exit();
        } 
        $sql = "SELECT name, age FROM results WHERE name= '$name';";
        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            while( $row = $result->fetch_assoc()) {                    
                 $dbage = $row['age'];
            }
        }
        else{
            echo "0 results";
        }
        $conn->close();
    }    
}

why do you echo(json_encode($dbage)); instead of just echo $dbage? — I'm Root James
– I'm Root James, Commented Jun 26, 2019 at 21:01
The action should be the script that processes the post data and displays the result. — Barmar
– Barmar, Commented Jun 26, 2019 at 21:21
sample.php processes the form data when it does include 'sampletest.php';' — Barmar
– Barmar, Commented Jun 26, 2019 at 21:22
You'll get NULL when you load the page the first time, since there's no form data posted yet, so $dbage hasn't been set yet. You should get the correct value after you submit the form. — Barmar
– Barmar, Commented Jun 26, 2019 at 21:23
No, json_encode is to encode into json. Check the manual -> php.net/manual/en/function.json-encode.php. If your $db_age is not a value that can be encoded into json, it will return false. — I'm Root James
– I'm Root James, Commented Jun 26, 2019 at 21:28

dqhendricks · Accepted Answer · 2019-06-26 21:26:07Z

1

your action in the form should be set to sample.php, i think is the first problem. then get rid of the javascript all together.

<form class="modal-content" action="sample.php" method="post">

then change:

<script>
function myFunction() {
    var user = '<?php echo(json_encode($dbage)); ?>';
    alert("This is a php varible " + user);
}
</script>

to just

<script>
    var user = <?php echo $dbage; ?>;
    alert("This is a php varible " + user);
</script>

submitting html forms to PHP does not require javascript at all.

edited Jun 26, 2019 at 21:26

answered Jun 26, 2019 at 21:03

dqhendricks

19.2k11 gold badges54 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

dqhendricks Over a year ago

@MTBthePRO also, one more tip. if you are just fetching data, use GET as your method, and use the corresponding GET global variables. POST is for changes to the database, and will cause warnings to the user if they hit the back button, submitting the same POST request to the server and stuff like that. there is a pattern people use where even on a POST form submission, after the database changes are made, PHP will redirect the user to a page. this way when the user hits the back button, it won't try to submit the same POST twice. en.wikipedia.org/wiki/Post/Redirect/Get

dqhendricks Over a year ago

@MTBthePRO when you use something like json_encode(), you should look up what that does, and figure out why someone is using it. json_encode would be for if you were returning a whole PHP object or array full of data to your javascript after an ajax call, and need to turn that object into a string for transmission, then the javascript would turn that JSON string back into an object (a javascript object on the client side), and be able to access any or the properties or array items of the object.

dqhendricks Over a year ago

@MTBthePRO once you have mastered PHP and HTML more, and start trying your hand at AJAX, you should consider using a library to make it easier, such as JQuery. once you have mastered how ajax works, you can start trying your hand at frameworks like REACT/REDUX. that's a ways off though. would be super confusing at your stage I think.

dqhendricks Over a year ago

@MTBthePRO for the above example, you are just having aan HTML form, submit data to the same page, so it loads again, but this time it has the form variables available to it. on that second load, it can then use those variables to find the age. then it just echoes the age out directly into the page that it sends back to the user. you gotta understand the flow of what happens at each step. PHP only executes before the page is sent to the user, then javascript only executes once the page has loaded client side. you were mixing the two as if they were both executing at the same time.

dqhendricks Over a year ago

@MTBthePRO the user's browser sends a message to the server requesting the page sample.php, the server gets that message, executes the PHP code in sample.php, which generates an HTML page that gets sent back to the user's browser. the browser then receives that page, displays it, and runs any javascript code contained within it.

|

user10618558 · Accepted Answer · 2019-06-26 21:12:57Z

0

From what I can see is that the actual query that you're sending is { name= '$name' }, try { name=' " . $name . " ' }.

answered Jun 26, 2019 at 21:12

user10618558

Collectives™ on Stack Overflow

Passing a PHP variable with fetched data to a JavaScript variable returns NULL or empty

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related