CODEWITHSUNDEEP
phpjavascripthtmlpost
jetbomber117
jetbomber117

Reputation: 79

$_POST the javascript Date() time at the time of submit button clicked

I am currently coding a web page that allows users to change local settings on a singleboard embedded computer. A feature I am currently working on involves syncing the clock on the board with the clock on the user's computer. The Javascript Date() function allows me to get the local machine's time, so I am using that to get the current time.

My goal is to create a submit button that, when pressed, would grab the exact time from the javascript Date() function, and then use the POST method to return that time to my php code. The reason I need to POST the value is so that I can run a Linux command line program that has privileges to change the time setting of the board.

Right now, the board gets the time correctly and POSTs it correctly, but the issue I am having is that the time returned is the time at which the page was loaded, and not the time that the submit button was clicked.

This is an issue because if the user sits on the webpage for, let's say, 5 minutes, and then clicks that button, the clock on the board will be submitted a time that is 5 minutes behind.

I have tried POSTing the value by assigning it to a hidden input item, which successfully posts it, but the time POSTed is the page load time. Another method I have tried was adding an onUnload call of a javascript function to the <body> tag, but the value does not seem to get POSTed when attempting to pass that time using the same method.

Here are the important code chunks that I am currently working with:

<?php
echo "<form method='POST' action='".$PHP_SELF."'>";

if (isset($_POST['getLocalTime']))
{
    echo $_POST['localTime'].'<br>';
    $setLocalTime = "My Commandline String";
    exec($setLocalTime);
}
?>

<input type="hidden" id="localTime" name="localTime">

<script language='JavaScript'>
var date = new Date();
var d = date.getUTCDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getUTCMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var year = date.getUTCFullYear();
var h = date.getUTCHours();
var hour = (h < 10) ? '0' + h : h;
var mi = date.getUTCMinutes();
var minute = (mi < 10) ? '0' + mi : mi;
var sc = date.getUTCSeconds();
var second = (sc < 10) ? '0' + sc : sc;
var loctime = month + day + hour + minute + year + "." + second;

document.getElementById('localTime').value = loctime;
</script>

<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

<input class="button" type="submit" name="getLocalTime" value="Copy Local Time">
</form>

I appreciate any suggestions that can be given, and thanks in advance.

Upvotes: 2

Views: 5141

Answers (3)

m1.
m1.

Reputation: 1325

This is happening because you are declaring the variable loctime when the page is rendered, you need to do it onsubmit.

Basically you want to wrap your javascript in a function and call it onsubmit. Without making too many changes to your code you could just do this:

<?php
echo "<form method='POST' onsubmit='getTime();' action='".$PHP_SELF."'>";

if (isset($_POST['getLocalTime']))
{
    echo $_POST['localTime'].'<br>';
    $setLocalTime = "My Commandline String";
    exec($setLocalTime);
}
?>

<input type="hidden" id="localTime" name="localTime">

<script language='JavaScript'>
function getTime() {
  var date = new Date();
  var d = date.getUTCDate();
  var day = (d < 10) ? '0' + d : d;
  var m = date.getUTCMonth() + 1;
  var month = (m < 10) ? '0' + m : m;
  var year = date.getUTCFullYear();
  var h = date.getUTCHours();
  var hour = (h < 10) ? '0' + h : h;
  var mi = date.getUTCMinutes();
  var minute = (mi < 10) ? '0' + mi : mi;
  var sc = date.getUTCSeconds();
  var second = (sc < 10) ? '0' + sc : sc;
  var loctime = month + day + hour + minute + year + "." + second;

  document.getElementById('localTime').value = loctime;
}
</script>

<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

<input class="button" type="submit" name="getLocalTime" value="Copy Local Time">
</form>

Upvotes: 3

Eugen Rieck
Eugen Rieck

Reputation: 65314

<?php
echo "<form id="loctimeform" method='POST' action='".$PHP_SELF."'>";

if (isset($_POST['getLocalTime']))
{
    echo $_POST['localTime'].'<br>';
    $setLocalTime = "My Commandline String";
    exec($setLocalTime);
}
?>

<input type="hidden" id="localTime" name="localTime">
</form>

<script language='JavaScript'>

function doGetLocTime() {

var date = new Date();
var d = date.getUTCDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getUTCMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var year = date.getUTCFullYear();
var h = date.getUTCHours();
var hour = (h < 10) ? '0' + h : h;
var mi = date.getUTCMinutes();
var minute = (mi < 10) ? '0' + mi : mi;
var sc = date.getUTCSeconds();
var second = (sc < 10) ? '0' + sc : sc;
var loctime = month + day + hour + minute + year + "." + second;

document.getElementById('localTime').value = loctime;

}

function doSubmitForm() {
  doGetLocTime();
  document.getElementById('loctimeform').submit();
}

</script>

<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>

<input class="button" type="button" name="getLocalTime" value="Copy Local Time" onclick="doSubmitForm();">

Upvotes: 0

gcochard
gcochard

Reputation: 11734

You should put your script in a function, and run that function using the onSubmit for the form object.

In your form definition:

echo "<form method='POST' action='".$PHP_SELF."' onsubmit='getTime();'>";

And for the javascript:

<script language='JavaScript'>
function getTime(){
var date = new Date();
var d = date.getUTCDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getUTCMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var year = date.getUTCFullYear();
var h = date.getUTCHours();
var hour = (h < 10) ? '0' + h : h;
var mi = date.getUTCMinutes();
var minute = (mi < 10) ? '0' + mi : mi;
var sc = date.getUTCSeconds();
var second = (sc < 10) ? '0' + sc : sc;
var loctime = month + day + hour + minute + year + "." + second;

document.getElementById('localTime').value = loctime;
}
</script>

Upvotes: 6

Related Questions