How do I get the local storage output into the server?

Question

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 28-Apr-18 4:20am

Member 13802778

Updated 29-Apr-18 0:07am

v6

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Kornfeld Eliyahu Peter · Answer 1 · 2018-04-28T23:19:00

Solution 1

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:

HTML

<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:

HTML

<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
  $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>

Posted 28-Apr-18 23:19pm

Kornfeld Eliyahu Peter

Updated 29-Apr-18 19:11pm

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.