Defining PHP variable with JS

How?

[bsbarker]

I know that a JS variable can contain PHP, as in:

var serverTime = '<?php print date("F d, Y H:i:s", time())?>'

Can a PHP variable similarly contain JS, as in:

$hours = "document.getElementById('hours1')"

?
I hope that's clear. I can't find anything about this so hopefully it's possible. I've tried several variations and nothing seems to work. Any ideas?

Thanks!

[Hester]

Remember that PHP gets converted to HTML and text before the browser displays it. Only then can Javascript come into effect. So in your first example PHP will add the date before the page is displayed, as if it had been typed into the code manually. In the second example you can, I guess, include text meant for Javascript execution using PHP variables. The variables won't be acted on, as PHP is on the server, not the browser. So only the raw text, not the value of the variable, can be used.

Hope that makes sense!

[bsbarker]

Thanks, Hester, that does make sense and it helped me to think through this more clearly.

[Readie]

Can replicate the effect using regex:

preg_match('/<([^\s]+)[^>]+?id=("|\')hours1("|\')[^>]*?>.*?<\/\\1>/', $input, $out);
echo $out[0];

Pretty sure that's working code, might have an error though, was typed on the fly.

[bsbarker]

Thanks for the reply, Readie.

I've never used regular expressions before - when you have a few minutes would you mind explaining what this one's doing? Does $out become the variable that contains the value of hours1? What does $input contain?

I read up on it after you posted this but it was a bit confusing for my greenie brain and unfortunately I haven't had a chance to try implementing it yet.

[Readie]

This regular expression grabs a HTML tag with an attribute saying id="hide1" or id='hide1', everything between the opening tag and the closing tag, and the closing tag.

I'll explain in step by step

<
Opening carat

([^\s]+)
Anything not whitespace, 1 or more times, provides a back reference (#1)

[^>]+?
Anything not a closing carat, 1 or more times, lazy

id=("|\')hours1("|\')
directly matches id="hours1" or id='hours1' - really it should read as
id=("|\')hours1\\2

[^>]*?
Matches anything not a closing carat 0 or more times. Lazy

>
Closing carat

.*?
Anything, lazy

<\/
A opening carat and a forward slash

\\1
The contents of back reference #1

>
Closing carat

---

$input is what you are searching through, and preg_match is odd in that, whereas most functions are formed like this:

$out = some_function($input1, $input2);

preg_match has the return value assigned to the third, optional, parameter.

[koan]

How about creating a cookie or a session variable with javascript and read it on next page display with PHP?

[bsbarker]

Thank you both for the replies.

koan, good suggestion but my project here is to build a countdown timer, so I don't want the page to have to reload each time the script runs.

Readie, that explanation was helpful. I'm having trouble getting this to work, but it feels like I'm close.

Maybe you guys can spot what I'm doing wrong. The countdown timer gets its hours/minutes/seconds values from three fields on my server, runs some javascript to reduce the seconds by 1, then sends the new values back to the server. The part that's not working is that it's sending null values to the server.

Here're the details for that part:

Javascript:

var timeLeft1 = new Date('<?php print date("F d, Y H:i:s", time())?>')
var h = //pulling value from timer_hour on my db
var m = //pulling value from timer_minutes on my db
var s = //pulling value from timer_seconds on my db

timeLeft1.setHours(h,m,s);

var hours = timeLeft1.getHours();
var minutes = timeLeft1.getMinutes();
var seconds = timeLeft1.getSeconds();

//Send h,m,s values to <div>s on the page.
document.getElementById("hours1").innerHTML= hours;
document.getElementById("minutes1").innerHTML= minutes;
document.getElementById("seconds1").innerHTML= seconds;

PHP sending values back to server:

<?php
preg_match('/<([^\s]+)[^>]+?id=("|\')hours1\\2[^>]*?>.*?<\/\\1>/', $input, $hours1);
preg_match('/<([^\s]+)[^>]+?id=("|\')minutes1\\2[^>]*?>.*?<\/\\1>/', $input, $minutes1);
preg_match('/<([^\s]+)[^>]+?id=("|\')seconds1\\2[^>]*?>.*?<\/\\1>/', $input, $seconds1);

mysql_connect(//connection info);

mysql_select_db(//db info);

$sql="UPDATE timer_values SET timer_hour='$hours1[0]', timer_minutes='$minutes1[0]', timer_seconds='$seconds1[0]' WHERE pod='1'";
?>

<div>s on the page:

<div id="hours1" name="hours1"></div>
<div id="minutes1" name="minutes1"></div>
<div id="seconds1" name="seconds1"></div>

That's edited to shorten it for this post, so hopefully I didn't leave something out. Let me know if you need more info.

Anyway, I have verified that all of the javascript is working correctly and that the <div>s are being populated correctly. I've also varified that the database is being updated, but the fields are being changed to null instead of the values contained in the <div>s.

Can you see what I've done wrong?

[Readie]

Ahh, you want the contents of the div. Just a small change to the regex:

preg_match('/<([^\s]+)[^>]+?id=("|\')hours1\\2[^>]*?>(.*?)<\/\\1>/', $input, $hours1);
echo $hours1[3];

Parenthesized sub expressions in regex create a back reference (up to a maximum of 9) so we just create a new back reference here.