• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6242
  • 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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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