I've created a dynamic dropdown using JS/PHP/MySQL but it seems I'm having some problems with special characters. 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... Also when using ± the character would should up as an unknown character (so somewhere I have my encoding set wrong as well.)
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));
});
$("#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>
<div class="footer">
<?php include("include/footer/footer.php") ?>
</div>
And this is my PHP running on the backend:
<?php
//\\ MODULAR DEPENDANT DROPDOWNS \\//
//creates DB connection
$dbHost = 'host';
$dbUser = 'user';
$dbPass = 'pass';
$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.
Thanks for any and all help getting this to work! It doesn't seem like this should be too hard I'm just not sure at how I should be telling the script to keep everything in the right encoding.
