Trouble passing variables between PHP and Javascript

Question

I have a simple HTML5 login page that requests a username and a password. The information is passed via POST to PHP for comparison with data in MySQL. I am trying to echo a simple "YES" if data was successfully validated and a "NO" otherwise. I want to take the text value of the response and manipulate it using Javascript. Everything seems to be working properly, but when the $response variable is echoed it is shown by itself on a blank HTML document and the JavaScript never gets executed. Following is the code I am using :

<ul>
<li>
<form action="login_submit.php" id="loginTest" method="post">
<span class="un"><i class="fa fa-user"></i></span><input type="text" id="maindata_email" name="maindata_email" value="" maxlength="40" required class="text" placeholder="Usuario"/></li>
<li>
<span class="un"><i class="fa fa-lock"></i></span><input type="password" id="maindata_password" name="maindata_password" value="" maxlength="10" required class="text" placeholder="Password"/></li>
<li>
<input type="hidden" name="form_token" value="<?php echo $form_token; ?>">
<div class="up">
<input type="submit" id ='ingresar' value="ingresar" class="btn">
<!--window.alert(5 + 6);-->
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
    var myData = <?php echo json_encode($response); ?>;
    window.alert(myData);
    if (myData == "YES") {
        alert("Usuario aceptado!");
        var href = 'http://index2.html';
        window.location=href;
    } else {
        alert("Usuario invalido!");
        var href = 'http://index.html';
        window.location=href;       
    }
</script>
<input type="submit"  id = 'editar' value="editar" class="btn">
</form>
</div>

</li>
</ul>

And here is the PHP section :

 /*** bind the parameters ***/
        $stmt->bindParam(':maindata_email', $maindata_email, PDO::PARAM_STR);
        $stmt->bindParam(':maindata_password', $maindata_password, PDO::PARAM_STR, 40);

        /*** execute the prepared statement ***/
        $stmt->execute();

        /*** check for a result ***/
        $user_id = $stmt->fetchColumn();

        /*** if we have no result then fail boat ***/
        if ($user_id == false)
        {
                echo $response = "NO";
        }
        /*** if we do have a result, all is well ***/
        else
        {
                /*** set the session user_id variable ***/
                $_SESSION['user_id'] = $user_id;

                /*** tell the user we are logged in ***/
                echo $response = "YES";
        }


    }
    catch(Exception $e)
    {
        /*** if we are here, something has gone wrong with the database ***/
        $message = 'No se puede procesar su ingreso.  Favor de intentar mas tarde.'."<br />\r\n";
    }
}

After I click on ingresar in the HTML the username and password are properly sent and received by PHP, the information is properly processed and compared to the values contained in the MySQL database and I get the proper response upon validation. Could anyone please explain why I get the blank page with the $response and the JavaScript code is never executed??? Thanx

Answer 1

Your code seems to be behaving as expected. Your form, upon submission makes a POST request to the servar at login_submit.php , and the browser displays the response from the server, which is where you've echoed the value of $response . There is no javascript or HTML printed on the PHP page, so no javascript is going to be run, and no HTML is going to be displayed... the browser is merely displaying the raw contents of the POST response from the form action since it's just interpreting it as a text response with no markup.

Now, what you're actually wanting is to get the data from the response on a web-page and run some javascript using that response data. There are a couple ways you could tackle this problem:

1. Avoid a page reload by using AJAX techniques to asynchronously request data back from the server through login_submit.php . When the data arrives back from the server after some indeterminate period of time, a javascript callback is called on the page which involves an action on the incoming response data.
2. Your login_submit.php page prints a full HTML page with the javascript embedded on that page, and you populate the variables in the resulting javascript from the PHP code that runs the MySQL query.
3. Take a page from ASP.NET forms and POST back to the page itself rather than a separate page, and use PHP to detect when a POST-back has taken place. So all the code for the form, MySQL query, etc. exists in the same PHP document, and you POST to the page itself. When the page reloads from the POST, it will populate the necessary javascript variables on the page with the correctly values.