$_POST value not set when <form action="javascript:someJSFunction()" ... />

Question

The basic question: When specifically are the $_POST and $_GET variables set? The reason I ask is explained below.

Advance disclosure: The file I am sharing here is for testing/learning purposes, and doesn't aim to achieve anything useful. I wrote it in order to isolate this one question from the other details of the project I am working on.

Here's a summary of what I'm trying to do: I call a javascript function from a form

<form action="javascript:jsTest()" ... />

and then from within jsTest() I assign a javascript variable based on the return of a php function, phpTest():

var jsVar = <?php echo json_encode(phpTest()); ?>;

The function phpTest() simply returns a $_POST variable:

return $_POST['testName'];

Here's the full code:

<?php
session_start();
function phpTest() {
    return $_POST['testName'];
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>javascript/php test</title>
    <script type="text/javascript">
        function jsTest() {
            var jsVar = <?php echo json_encode(phpTest()); ?>;
            alert(jsVar);
        }
    </script>
</head>

<body>
    <form method="POST" name="testForm" action="javascript:jsTest()">
        <input type="text" name="testName" value="username" />
        <input type="submit" value="submit" />
    </form>
</body>

</html>

The problem: alert always displays null.

I tested this in two ways. 1) If instead I set the form action to a separate .php file, the $_POST variables associated with the form input fields are set, and an echo in that file, of those $_POST values, is shown in the browser. And alternatively, 2) if instead I return from phpTest() a simple string,

return 'hello kitty';

then the javascript alert() shows exactly that returned string. Therefore I believe it is safe to assume that the $_POST variable has not yet been set. Which brings me to the question I have not been able to find an answer to:

When exactly are $_POST variables set? I assumed it was before page reload (which my approach requires), and I assumed this because if I alternatively use method="GET" in my code, I see the GET variables tacked onto the URL without any prior page reload.

Thanks in advance.

Chris

Fundamental error: PHP runs on the server, Javascript on the client, and neither can invoke the other's code directly. When the PHP code runs the first time, it's not a POST, so $_POST is empty. Your form never submits back to the server either, so $_POST can NEVER be set with this code sample. — Marc B
– Marc B, Commented Jul 25, 2012 at 15:21

bennoislost · Accepted Answer · 2012-07-31 20:45:25Z

As Marc B said with your current code example it will never work as you intend it to.

$_POST will always be availabe through out your script because it's one of PHP's superglobal arrays, however it may not have a value. $_POST has a value when POSTDATA is sent via a HTTP POST request. You can set the value of $_POST programaticly but that isn't cool. Ever.

For your script to work(ish) you need to send a HTTP POST request populated with some POSTDATA. You can do this using cURL or Firefox's Poster plugin.

POST /index.php HTTP/1.1
User-Agent: curl/7.21.4 (universal-apple-darwin11.0)
Host: example.org
Accept: */*
Content-Length: 16
Content-Type: application/x-www-form-urlencoded

testName=yeahboi

if you can view your HTTP response body the JavaScript variable JsVar should now be populated with 'yeahboi'.

Ive updated your script a little to submit the form via HTTP POST to it's self and populate a JavaScript variable.

<?php

// Script name: index.php

// Define a default value...
$name = 'unknown';

// Make sure post item 'testName' is available...
if(isset($_POST['testName']) &&
    !empty($_POST['testName'])) {

    // POST is available update name...
    $name = $_POST['testName'];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>javascript/php test</title>
    <script>
    // wait for the DOM to be ready then update the JS variable with PHP's $name variable
    document.addEventListener('DOMContentLoaded', function() {

        var elm = document.getElementById('post-response'),
            value = '<?php echo $name; ?>';

        elm.innerHTML = value;
    }, false);
    </script>
</head>
<body>
    <div id="post-response"></div>
    <form method="POST" name="testForm" action="index.php">
        <input type="text" name="testName" value="username" />
        <input type="submit" value="submit" />
    </form>
</body>
</html>

Hope this helps you out a bit.

Hi Benno, thanks so much for the insight. I should have commented further by saying that I did my homework shortly after I first posted this question, and am now using AJAX for making server-side requests without page reload. Thanks for your help!

Collectives™ on Stack Overflow

$_POST value not set when <form action="javascript:someJSFunction()" ... />

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related