• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5540
  • Last Modified:

Pass HTML5 localStorage variable to PHP MySQL

I need to pass an HTML5 localStorage variable to PHP/MySQL. Within HTML5 I create localStorage.txtItem. On a php page I am trying to retrieve the localStorage.txtItem into a variable so I can use in my MySQL SELECT statement. See followin snipet:

<?php

$item = (localStorage.txtItem);
                        
$conn = mysql_connect("localhost", "X", "X") or die(mysql_error());
            mysql_select_db("test");
            
$sql = "SELECT price FROM items WHERE id = '$item'";
$result = mysql_query($sql, $conn) or die(mysql_error());

Any code examples would be greatly appreciated.
0
kbios
Asked:
kbios
1 Solution
 
Ray PaseurCommented:
I think you have the order of things backwards.  PHP is a scripting language that generates HTML.  HTML cannot talk to PHP except through the defined interfaces of the HTTP protocol, such as GET and POST.

So the solution I would recommend is to have PHP generate the HTML string that will be put into localStorage.txtitem.  PHP can keep this variable in the script and use it in the query just like you have shown above.
0
 
Scott MadeiraCommented:
If the itemID that you want to retrieve is dynamically generated on the client-side (therefore you have no prior knowledge of it in your PHP script) then you will need to do something on the browser side to retrieve the value and send it to the server via AJAX.   You may be able to create a Javascript event that fires when appropriate to send that data to a php script and then you can process it.

Without knowing what you are trying to do or the exact use case it is difficult to give any additional information.
0
 
kbiosAuthor Commented:
Is there a way to set my php variable using the GET that you mentioned? Something like $item = GET('localStorage.var')? I'm a newbie with this; just trying to piece it all together:)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
kbiosAuthor Commented:
the itemID is dynamically generated on the client-side. the itemID is then stored in a localStorage variable. I can retreive this localStorage variable within other HTML pages. all I simply want to do is somehow pass this variable on to mysql so the SELECT statement 'SELECTS' that itemID.
0
 
Ray PaseurCommented:
the itemID is dynamically generated on the client-side -- please show us the exact code that generates the itemID, thanks.
0
 
kbiosAuthor Commented:
The code displays a text box. A QR Code is scanned that contains a URL. At the end of the URL is a pound sign followed by the itemID. (www.xyz.com/xxxxxxxxxxxxxxxxxxxx#1234). The SAVE button launches the javascript that parses the itemID from the textbox and creates the localStorage.txtItem variable. I then launch the .php attempting to set a variable within the php that will reteive the localStorage variable.

...
<form action="">
  <fieldset>
  <input type="text" id=txtitem size=50 autofocus/><br />
  <input type="button" value=" Save " onClick="setValue()"/>
  </fieldset>      
</form>      
            
<script type="text/javascript">
   function setValue() {
     var txtitem = document.getElementById("txtitem");
     var item = txtitem.value;
     var x = item.indexOf("#");
     var y = item.length;
     var z = item.substring((x + 1),y);
     localStorage.txtItem=(z);
     window.top.location = "getdbinfo.php";
   }
</script>
0
 
Ray PaseurCommented:
This might work... Pidgin Code

window.top.location = "getdbinfo.php/xxxxxxxxxxxxxxxxxxxx#1234";

But why not just submit the form directly, like this?
<form action="">
  <fieldset>
  <input name="itemID" type="text" id=txtitem size=50 autofocus/><br />
  <input type="submit" value=" Save " onClick="setValue()"/>
  </fieldset>      
</form>

Open in new window

0
 
hieloCommented:
try the code below:
<form action="getdbinfo.php" method="post" onsubmit="return setValue()">
  <fieldset>
  <input type="text" id=txtitem size=50 autofocus/><br />

<input type="hidden" name="hiddenItem" id="hiddenItem" value="" />
  <input type="submit" name="Submit" value=" Save " />
  </fieldset>      
</form>      
            
<script type="text/javascript">
   function setValue() {
     var txtitem = document.getElementById("txtitem");
     var item = txtitem.value;
     var x = item.indexOf("#");
     var y = item.length;
     var z = item.substring((x + 1),y);
     localStorage.txtItem=(z);
//this updates the hiddenField so that if you can retrieve it via POST
document.getElementById("hiddenItem").value=z;
return true;
   }
</script>

in getdbinfo.php, you can use:
$_POST['hiddenItem']

to retrieve a copy of the value you just stored in local storage:

$conn = mysql_connect("localhost", "X", "X") or die(mysql_error());
mysql_select_db("test") or die( mysql_error() );

$item=mysql_real_escape_string($_POST['hiddenItem']);

$sql = "SELECT price FROM items WHERE id = '$item'";

Open in new window

0
 
kbiosAuthor Commented:
Thank you. Your solution solved the problem. However, I would like to ask a followup question. With this test I am only sending over 1 field. What would be needed to send over multiple fields? Thank you again for your help.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now