URlencode with php dynamic drop downs

Question

I'm working to try and establish a "safe" dynamic form using php/jquery. I am trying to figure out how to encode a query result in the URL, but also being able to display the query correctly in the browser. Ive tried wrapping a urlencode around the data in each of the for loops but it outputs the encoded data and disables the ability to populate the second drop down.

        <!-- Populate First Dropdown -->
        <select id="first-choice" name="cardset">
            <?php foreach ($data as $row): ?>
                <option><?=htmlentities($row["name"])?></option>
            <?php endforeach ?>
        </select>

<br />
        <!-- Populate Second Dropdown -->
        <select id="second-choice" name="card">
            <option>Please choose from above</option>
        </select>
        <!-- Jquery to Populate second and Produce image -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script language=JavaScript >
                $(document).ready(function(){
                    $("#first-choice").change(function() {
                    $.get("getter.php", { choice: $(this).val() }, function(data) {
                        $("#second-choice").html(data);
                    });
                });


                    $("#second-choice").change(function() {
                    var first = $("#first-choice").val();
                    var sec = $(this).val();
                    $("#image-swap").attr("src", (first !== "" &&  + sec !== "") ? "pics/" + first + "/" + sec + ".jpg" : "");
                    });
                });
        </script>

Here is the getter.php file I use to populate second drop down using above jquery:

$choice = $_GET['choice'];

    $sth = $db->prepare("SELECT code FROM sets WHERE name='$choice'");
    $sth->execute();
    $choicecode = $sth->fetchColumn();

    $stmt = $db->prepare("SELECT * FROM cards WHERE code='$choicecode'");
    $stmt->execute();
    $data2 = $stmt->fetchAll();
?>
<?php foreach ($data2 as $row): ?>
    <option><?=$row["cardname"]?></option>
<?php endforeach ?>

Basically I want to encode the data that goes in the drop downs because they contain spaces and apostrophes. How can I still do this while at the same time output them correctly?

Answer 1

urlencode should be used when you're constructing the query parameters in a URL. When you're putting text into HTML, you should use htmlentities. Also, use the ID column as the value in your options.

<?php foreach ($data as $row): ?>
    <option value="<?=$row["id"]?>"><?= htmlentities($row["name"]) ?></option>
<?php endforeach ?>

Also, you should use parametrized queries to prevent SQL injection and avoid other problems when constructing the query if it contains special characters:

$stmt = $db->prepare("SELECT * FROM cards 
                      WHERE code = (SELECT code FROM sets WHERE id = :id)");
$stmt->execute(array(':id' => $_GET['choice']));
$data2 = $stmt->fetchAll();