PHP/Javascript dynamic select option – how to handle problem with apostrophes in the select option text

I’ve read many posts on this topic on SO, but none of the suggested solutions that i’ve come across help me solve my problem.

I have a dynamic HTML select box that i’ve built in PHP based off the results of a MySql query. In addition to the selected text value of the select option, in the value attribute, i am passing two values to Javascript to be used later that are separated by a comma (not related to the problem, but just to make the code below clearer).

I absolutely understand that apostrophes in strings cause problems and special precautions need to be taken to handle them. My working theory is that i simply need to put a ” character before any single quote when dynamically creating the select box control to get the passed value treated literally later by javascript.

My dynamic PHP select box code looks like this:

$locSql = "select name, shortname, locationid from location_tbl l where ....";
    $locResultSet = mysqli_query($conn, $locSql) or die("Bad SQL " . $locSql); 

    $opt = "<select name='selFieldLocation' id='fieldLocation' onChange='setSelectedLocName(this);'>";
    $opt .= '<option value="blank">Select Location</option>';
    while ($row = mysqli_fetch_assoc($locResultSet)) {
        $selectedLocID = $row['locationid']; 
        
        // This echo statement returns the value from the database, e.g.....
        // "SUN Men's Group"
        echo 'first row shortname ' . $row['shortname'] . "<br>";

        // Applied "addslashes" to that value.
        $thisShortName = addslashes($row['shortname']);

        // Echo the new value....
        // The result is: "SUN Men's Group" (which is what i was after)
        echo 'new shortname is ' . $thisShortName . "<br>";

        $opt .= "<option value='{$row['locationid']},$thisShortName'> {$row['name']} </option>n"; 
        //echo 'row shortname ' . $thisShortName . "<br>";
    }
    $opt .= "</select>";
    $opt .= '<input type="hidden" name="selLocText" id="selLocText"  />';
    $opt .= '<input type="hidden" name="selLocShortName" id="selLocShortName"  />';

    var_dump($opt);

The var_dump at the end displays dynamic code for the creation of the select box just as i expect:

'<select name='selFieldLocation' id='fieldLocation' onChange='setSelectedLocName(this);'><option value="blank">Select Location</option><option value='11,SUN Men's League'> Sunday Men's Group </option>
<option value='30,WED. - Men's Group'> Wednesday - Men's Group </option>
<option value='19,TUES. - Men's Group'> Tuesday - Men's Group </option>

In practice, when the user chooses an option, the “setSelectedLocName” javascript function is called (which resides in an external JS file). That code looks like this:

function setSelectedLocName (x) {
  
  alert('Checking passed values ' + x.options[x.selectedIndex].value);
  var selectedLocName = x.options[x.selectedIndex].text;
  etc....

What is displayed in the alert statement just above looks like the following:

Checking passed values: 11,SUN Men
or
Checking passed values: 30,WED. - Men
etc....

In short, i’ve been under the impression that escaping the single quote with a slash (“”) (as the PHP “addslashes” function does) would tell javascript to treat the single quote literally, yet JS still seems to truncate the string at the single quote. Interestingly, the “x.options[x.selectedIndex].text” value (which ALSO contains a single quote in the string) passes correctly without any programmer intervention at all. (?)

Can anyone suggest an approach that would get me to my goal here? It appears (to me at least) that i’ve set up the dynamic select box exactly as i’d like it to look. Thanks much for the help!

Answer

You can try something else instead of loading the whole html you are creating into a string html ($opt) variable and displaying it all at once.

You can put a loop (either the while or gather the data in it and create one in the correct place) where the html needs to be and create it there like this:

?>
 <select name="selFieldLocation" id="fieldLocation" onChange="setSelectedLocName(this);"></select>
    <option value="blank">Select Location</option>
<?php
    while ($row = mysqli_fetch_assoc($locResultSet)) {
?>
    <option value="<?php echo $row['locationid'];?>,<?php echo $thisShortName;?>"><?php echo $row['name'];?></option>
<?php

    } ?>
 </select>
 <input ....

This way you save up on a lot of apostrophes! — instead of echo $opt; we create the html and between it we put the loop, this is actually a much easier way to build html inside PHP code but it sometimes forces you to build your loops inside the html…

This is one of the best features of PHP… just like you stick it in a JS script you can stick it in HTML! 🙂

This with mock data from your code:

$row['locationid'] = 30;
$thisShortName = "SUN Men's Group";
$row['name'] = "Tuesday - Men's Group";
?>
<option value="<?php echo $row['locationid'];?>,<?php echo $thisShortName;?>"><?php echo $row['name'];?></option>

Will return:

<option value="30,SUN Men's Group">Tuesday - Men's Group</option>

Advertisement

Answer