1

I need to be able to receive the php response from the web server before running the javascript function clientside.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="/css/Darkmode/signin.css">
        <link rel="shortcut icon" href="images/favicon.ico" />
        <title>Pelican</title>
    </head>
    <body>
        <script>
            window.onload = event => {
                document.getElementById("username-display").innerHTML = localStorage.getItem("NAME");
            };
        </script>
        <div class="header typewriter">
            <img src="images/logo.svg">
            <h1>Pelican: Security where it counts</h1>
        </div>
        <div class="topnav">
            <a href="home.php">Home</a>
            <a href="download.php">Download</a>
            <a href="support.php">Support</a>
            <a href="about.php">About</a>
            <a href="login.php">Login</a>
            <a href="register.php">Register</a>
            <a href="tos.php">ToS</a>
            <a href="profile.php">Profile</a>
            <p id="username-display"  class="pos-right"></p>
        </div>
        <div class="login-page">
            <div class="form">
                <form class="login-form" action="" method="post" onsubmit="setName();document.location.reload(true)">
                    <input name="email" type="text" placeholder="email" value="" />
                    <input name="pass" type="password" placeholder="password" value="" />
                    <button name="button" onclick="setName()">Sign In</button>
                    <p class="message">Not registered? <a href="register.php">Create an account</a>
                    </p>
                </form>
            </div>
        </div>
        <div class="php"> <?php
    global $email;
    if (isset($_POST["button"])){
        $email = $_POST["email"];
        $pass = $_POST["pass"];
        if ((strpos($email, " ") != FALSE) or (strpos($pass, " ") != FALSE)) {
            echo "invalid entries (no spaces!)";
        } else {
            echo passthru("python ../Backend/Auth/Auth.py $email $pass");
        }
    } else {
        $email = "not set";
    }
    ?> </div> <script>
            function setName() {
                var name = '<?php global $email; passthru("python ../Backend/User/getName.py $email");?>';
                localStorage.setItem("NAME", name);
                return false;
            };
        </script>
    </body>
</html>

At the minute, after pressing login on the website, the "name" variable in the function is set but not in time for the "NAME" value to be set in local storage so it ends up as an empty string.

If I then press the login button again, it runs the javascript function with the correct value, setting the localStorage value. Is it possible to only run the javascript function after submitting the form and receiving the response.

MaximumFire
  • 13
  • 2
  • The JS code will run before the data is sent to the server. Therefore it should be self-evident that it can't read some data which doesn't exist yet. Moreover, the PHP code you've embedded in the `var name=...` line will run _when the form is first loaded_, so _before_ the user has even had chance to type anything in. So the result of that code will be embedded in the JS even before the function runs. – ADyson Apr 15 '22 at 20:14
  • I think you should read [hat is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) to gain a clearer understanding of how the flow of a web application works. – ADyson Apr 15 '22 at 20:14
  • Anyway it's not clear why you actually want to put this into the localstorage? The normal way to do this sort of thing is to put the username value into the PHP session. You can then echo it into the page whenever you want, there's no need to store it in the browser directly. – ADyson Apr 15 '22 at 20:20

1 Answers1

-2

Your easiest solution here is using AJAX.

https://www.w3schools.com/js/js_ajax_intro.asp

Put your PHP in a separate file. Just ensure the script outputs EXACTLY the data you need (you can output other things, but start with simple).

Then in your Javascript you make the AJAX call:

   function loadDoc() {
      const xhttp = new XMLHttpRequest();
      xhttp.onload = function() {
        return this.responseText;
      }
      xhttp.open("GET", "yourphpfile.php", true);
      xhttp.send();
    }

    var returnFromScript = loadDoc();

Now you have a variable called "returnFromScript" that contains the output of the PHP script and you can use that in any way you like in your Javascript.

I have edited the code quickly from the example given in the link I provided, but it's just so you see the logic behind it. There are plenty easy to follow AJAX examples out there that will help you understand the concept.

kissumisha
  • 484
  • 4
  • 12