I've created a dynamic dropdown using JS/PHP/MySQL but it seems I'm having some problems with UTF8 decoding in my PHP. The script is going to be used to make a small application that helps my customers find a product that meets their criteria. We sell panel meters that can accept different ranges of input and many are denoted with a +/- or a value (example: a meter can expect to process a voltage +/- 10V around a specified voltage.) Everything is starting to work great in my script except when some characters are parsed through (+, / , ±, ½, etc.) My database originally used ± to denote plus or minus but I then switched to +/- (three characters) in hopes that it would fix the special character problem but it didn't...
Using console.log I've figured out that my JS is encoding the special characters correctly but once it gets to my PHP it doesn't decode properly.
Everything along the way is set to UTF8
So now I still need to figure out why some things are not parsing right.
You can view a live version of the script at http://new.foxmeter.com/find.php.
This is the important part of my frontend
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#type").change(function() {
var tval = document.getElementById('type').value;
$("#range").load(encodeURI("findbackend.php?type=" + tval));
});
$("#range").change(function() {
rval = document.getElementById('range').value;
$("#power").load(encodeURI("findbackend.php?range=" + rval));
console.log(encodeURIComponent(document.getElementById('range').value));
});
$("#power").change(function() {
//var rval = document.getElementById('range').value;
psval = document.getElementById('power').value;
$("#setpoint").load(encodeURI("findbackend.php?range=" + rval + "&power=" + psval));
});
$("#setpoint").change(function() {
//var rval = document.getElementById('range').value;
//var psval = document.getElementById('power').value;
stval = document.getElementById('setpoint').value;
$("#output").load(encodeURI("findbackend.php?range=" + rval + "&power=" + psval + "&setpoint=" + stval));
});
});
</script>
</head>
<body>
<!-- Google Analytics Script -->
<?php include_once("scripts/analyticstracking.php") ?>
<div class="wrapper"> <!-- Sticky Footer Wrapper -->
<div id="panorama"></div>
<div id="header">
<?php include("include/header/banner.php") ?>
<?php include("include/header/nav.php") ?>
<?php include("include/header/quicksearch.php") ?>
</div>
<div id="content">
<div id="findoptions">
<select id="type" class="finddrops">
<option selected value="base">Please Select</option>
<option value="DC Voltage">DC Voltage</option>
<option value="DC Current">DC Current</option>
<option value="AC Voltage">AC Voltage</option>
<option value="AC Current">AC Current</option>
<option value="Strainguage">Strainguage</option>
</select>
<br>
<select id="range" class="finddrops">
<option>Please choose from above</option>
</select>
<br>
<select id="power" class="finddrops">
<option>Please choose from above</option>
</select>
<br>
<select id="setpoint" class="finddrops">
<option>Please choose from above</option>
</select>
<br>
<select id="output" class="finddrops">
<option>Please choose from above</option>
</select>
<br>
<select id="blarg" class="finddrops">
<option>Please choose from above</option>
</select>
</div>
<div id="findresults" class="finddrops">
</div>
</div>
</div>
And this is my PHP running on the backend:
<?php
//\\ MODULAR DEPENDANT DROPDOWNS \\//
//creates DB connection
$dbHost = 'host';
$dbUser = 'user';
$dbPass = 'password';
$dbDatabase = 'database';
$con = mysql_connect($dbHost, $dbUser, $dbPass) or trigger_error("Failed to connect to MySQL Server. Error: " . mysql_error());
mysql_select_db($dbDatabase) or trigger_error("Failed to connect to database {$dbDatabase}. Error: " . mysql_error());
//prevents injections
//any order
$type = mysql_real_escape_string(urldecode($_GET['type']));
isset($_GET['range'])?$range = mysql_real_escape_string(urldecode($_GET['range'])):"";
isset($_GET['power'])?$power = mysql_real_escape_string(urldecode($_GET['power'])):"";
isset($_GET['setpoint'])?$setpoint = mysql_real_escape_string(urldecode($_GET['setpoint'])):"";
//forms the query depending on what data is recieved through GET
//first option on the bottom; last option on the top to avoid conflicts
if (isset($_GET['setpoint'])) {
$query = "SELECT DISTINCT stp FROM meters WHERE sio='$range' AND pso='$power' AND stp='$setpoint' ORDER BY model";
} elseif (isset($_GET['power'])) {
$query = "SELECT DISTINCT stp FROM meters WHERE sio='$range' AND pso='$power' ORDER BY model";
} elseif (isset($_GET['range'])) {
$query = "SELECT DISTINCT pso FROM meters WHERE sio='$range' ORDER BY model";
} else {
$query = "SELECT DISTINCT sio FROM meters WHERE sit LIKE '%$type%' ORDER BY model";
}
//creates a result array from query results
$result = mysql_query($query);
//outputs dropdown options dependent on what GET variables are set
//first option on the bottom; last option on the top to avoid conflicts
if (isset($_GET['setpoint'])) {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'stp'} . "'>" . $row{'stp'} . "</option>";
}
} elseif (isset($_GET['power'])) {
echo "<option>Choose Setpoint Options</option>";
while ($row = mysql_fetch_array($result)) {
$row{'stp'} = ucfirst($row{'stp'}); //capitalizes the first letter; necessary?
echo "<option value='" . $row{'stp'} . "'>" . $row{'stp'} . "</option>";
}
} elseif (isset($_GET['range'])) {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'pso'} . "'>" . $row{'pso'} . "</option>";
}
} else {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'sio'} . "'>" . $row{'sio'} . "</option>";
}
}
//Thanks to Chris Coyier for the wonderful examples on CSS-Tricks
//A Web Application by Zach Klemp
?>
Again, you can view the script here.
Choose DC Voltage in the first dropdown and then a +/- option in the second the see where the problem begins. When you choose Straingauge in the first dropdown and then click '30 mV with 10 V DC excitation' it parses through fine. (And as an aside another problem I have is that choosing the first result without clicking another first doesn't trigger the .change)
Thanks for any and all help getting this to work! I've been trying to figure this out for a bit now and haven't come up with a solution.
Try this in your PHP file :
Replace any echo XXXX; with utf8_decode(XXXX)
It should make it works
$string = ';http%3A%2F%2Fwww.google.com%2F%3Fq%3Dtesting%2Burldecode';
echo urldecode($string); // http://www.google.com/?q=testing+urldecode
For further reading, see the official PHP documentation on urldecode here.