Solved

Pass HTML5 localStorage variable to PHP MySQL

Posted on 2011-09-13
9
4,620 Views
Last Modified: 2012-05-12
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
Comment
Question by:kbios
9 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 36529779
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
 
LVL 14

Expert Comment

by:Scott Madeira
ID: 36529878
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
 

Author Comment

by:kbios
ID: 36529937
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
Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

 

Author Comment

by:kbios
ID: 36529963
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 36529999
the itemID is dynamically generated on the client-side -- please show us the exact code that generates the itemID, thanks.
0
 

Author Comment

by:kbios
ID: 36530177
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 36530216
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
 
LVL 82

Accepted Solution

by:
hielo earned 250 total points
ID: 36530280
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
 

Author Closing Comment

by:kbios
ID: 36530569
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Load balancing is the method of dividing the total amount of work performed by one computer between two or more computers. Its aim is to get more work done in the same amount of time, ensuring that all the users get served faster.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question