Click here to Skip to main content
14,699,089 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
The object of my script is to save form output to local storage in the browser if the signal does not allow connection to server, using an iPad in remote locations. Then subsequently getting the data back when the signal is restored.
I have been a couple of weeks trying to get the local storage to feed back onto my page in php format. I get it back OK as a javascript but I cannot work out how to send to the server and then get it back to the page. I have copied a few different bits of script from websites, including ajax, but I really do not understand javascript enough to make it work. None of the javascript is my own creation. The script can be downloaded and run to show the script working.
The code I originally gave has been changed by someone. It will not work at all now because the script tags have been removed.

UPDATE: I have now changed the code sample back to original with the changes suggested for POST instead of GET.

What I have tried:

<?php
$php_result=$_POST['result'];
print "This is the php result from server <br>result=".$php_result."<br><br>";
print "This is the javascript output from storage...";
$customer=$_POST['customer'];

?>
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<form method = "POST" action = "" name="cust_form">
<p>Type anything in the box</p>
<input type="text" name="customer" size="10" value="<?php print $customer;?>">

<p><input type="submit" value="Continue"></p>
</form>
<script>
var customer = <?php echo json_encode($customer); ?>;
if (typeof(Storage) !== "undefined") {
localStorage.setItem("cust", customer);

document.getElementById("result").innerHTML = localStorage.getItem("cust");

xhttp.onreadystatechange = function() {
getElementById("result").innerHTML = localStorage.getItem("cust");

  if (this.readyState == 4 && this.status == 200) {

  }
};


xhttpRequest.open('POST', 'http://www.jhw1.com/local_store.php', true);
xhttpRequest.send();
};


</script>
</body>
</html>
Posted
Updated 29-Apr-18 1:07am
v6
Comments
Member 13802778 29-Apr-18 5:55am
   
Yes, php and javascript changed to read 'POST' instead of 'GET'.
Member 13802778 29-Apr-18 6:07am
   
Do I need some kind of utton to send to server?
Member 13802778 29-Apr-18 6:08am
   
Should read 'Button'

1 solution

HTTP's GET does not send hidden fields to the server automatically, so you have two options...
1. add it a query param
2. use POST

Your second problem is here:
<div id="result"></div>
<form method = "POST" action = "" name="cust_form">
  <p>Type anything in the box</p>
  <input type="text" name="customer" size="10" value="<?php print $customer;?>">
  <p><input type="submit" value="Continue"></p>
</form>

The 'result' you are using not a hidden field (means an input with type hidden), but a div, and it is also outside of the form...
You should use markup lie this:
<div id="result"></div>
<form method = "POST" action = "" name="cust_form">
  <p>Type anything in the box</p>
  <input type="text" name="customer" size="10" value="<?php print $customer;?>">
  <p><input type="submit" value="Continue"></p>
  <input type="hidden" id="result">
</form>


-- EDIT --
A proposed solution:
sample.php
<?php
  $php_result = $_POST['result'] ? $_POST['result'] : 'server';
  $customer = $_POST['customer'];
  echo "From server =" . $php_result;
  echo "From client = " . $customer;
?>

<!DOCTYPE html>
<html>
  <body onload="initStorage()">
    <form method="POST" action="sample.php" onsubmit="saveStorage()">
      <p>Type anything in the box</p>
      <input type="text" name="customer" size="10" value="<?php echo $customer;?>">
      <input type="hidden" name="result" value="<?php echo $php_result;?>">
      <input type="submit" value="Continue">
    </form>
  </body>

  <javascript>
    function initStorage()
    {
        // store 'result' on local storage
    }

    function saveStorage()
    {
        // save local storage to 'result'

        return(true); // to continue...
    }
  </javascript>
</html>
   
v4
Comments
Member 13802778 29-Apr-18 5:49am
   
Thanks for your reply. I have now changed GET to POST and tried it, but still no output. The URL where I am testing the script is http://www.jhw1.com/local_store.php
Kornfeld Eliyahu Peter 29-Apr-18 5:51am
   
The question is: have you changed the PHP too?
Member 13802778 29-Apr-18 6:18am
   
Sorry, I'm new to this website. I answered in the wrong place. Please see the revised code above.
Kornfeld Eliyahu Peter 29-Apr-18 6:38am
   
In the standard HTTP POST hidden field should be inside the form to be posted to the server...
Member 13802778 29-Apr-18 6:48am
   
I understand that, but I am hopeless with javascript so I do not know how to do that. I just tried moving the end form tag after the end scrpt tag but that di not make any difference.
Kornfeld Eliyahu Peter 29-Apr-18 6:50am
   
Not the script! The hidden fields!!!
Member 13802778 29-Apr-18 6:54am
   
But there are no hidden fields in the form.
Member 13802778 29-Apr-18 7:45am
   
I really appreciate the help you are giving me. I wonder if you could give an example of the code I should use.
Kornfeld Eliyahu Peter 29-Apr-18 8:04am
   
See updated solution...
Member 13802778 29-Apr-18 8:48am
   
That makes sense, but I have changed the markup and I still get no output. Should I have a separate button as the continue button was there to add the data to the local storage? Should it be a separate form?
Kornfeld Eliyahu Peter 29-Apr-18 9:27am
   
On my 12th glance at your code I actually realized, that I do not see where you are calling your code...
It is not a function so it will be executed only once, when page loaded... and probably does nothing then...
Member 13802778 29-Apr-18 9:39am
   
It certainly sends the data typed in the text box to the browser local storage. Using Firefox local storage inspector it is shown there. The data is returned too as can be seen after the line "This is the javascript output from storage...". I assumed that the result would also be sent to the server. After your corrections I cannot think of any other way to do this.
Member 13802778 29-Apr-18 12:01pm
   
Thanks again for your efforts. I guess there will be an answer to this eventually. I had better start from scratch and learn javascript. Not something I have any desire for, but I need to solve this problem sooner or later.
Kornfeld Eliyahu Peter 29-Apr-18 13:46pm
   
It is not clear to me what do you try to achieve, but added a proposal, that shows how to preserve servers side valuse during post-back...
Member 13802778 29-Apr-18 16:52pm
   
No, not the answer unfortunately. I should have explained that the whole idea of saving to local storage is that the browser can be turned off and the data can be retrieved subsequently when it is turned on again. It saves it indefinitely without the use of the server. It is no good unless the data can be used once retrieved and the form repopulated for saving to SQL database.
Kornfeld Eliyahu Peter 30-Apr-18 1:10am
   
OK... See the updated solution...
Member 13802778 30-Apr-18 4:19am
   
No, that failed.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900