JSON array as value in HTML select

Question

I'm developing a website using PHP which enables the creation on poster automatically. The users can choose between color themes which are defined on a php file like this:

$f_1 =array(
    "1" => "#1e354c ",
    "2" => "#ebcc85",
    "3" => "#133745"
    );
$f_3 =array(
    "1" => "#1e354c",
    "2" => "#b5cd9c",
    "3" => "#133745"
    );

$themes = array(
          "Tema 1"        => json_encode($f_1),

          "Tema 2"          => json_encode($f_3)
          );

echo "<select class='form-control' id='themeselect' onchange='updatePoster()'>";
foreach($themes as $cc => $name) {  
    echo '<option value="' . $name . '">' . $cc . '</option>';    
}
echo "</select>";

The JSON ecoding of $f_1 looks like this;

"{\"1\":\"#1e354c \",\"2\":\"#ebcc85\",\"3\":\"#133745\"}"

The problem is that the value of "Tema 1" is "{"

I also tried to use serialize() instead of json_encode() but that didn't work either.

Quentin · Accepted Answer · 2015-01-23 15:59:35Z

2

" has special meaning in an attribute value delimited by " characters.

Use htmlspecialchars() to convert non-HTML data to HTML before inserting in an HTML document.

foreach($themes as $cc => $name) {  
?>
    <option
        value="<?php echo htmlspecialchars($name); ?>">
        <?php echo htmlspecialchars($cc); ?>
    </option>
<?php
}
?>

answered Jan 23, 2015 at 15:59

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergiu Paraschiv · Accepted Answer · 2015-01-23 15:59:16Z

1

json_encode returns a string. It's your job as a developer to use it properly. While \" is the proper way of escaping double quotes in a double quoted string in PHP, that's not the case with HTML attributes. " is.

So I bet the generated HTML looks like this:

<select  ...>
    <option value="{"1":...>Tema1</option>
</select>

Notice why updatePoster tells you the selected value is "1"?

answered Jan 23, 2015 at 15:59

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

2 Comments

Niclas Gleesborg Over a year ago

I realize that there is a problem with the encoding but I don't know how to fix it. I need the array to be able to be serialized/unencoded by another PHP script at a later point.

Sergiu Paraschiv Over a year ago

As Quentin said: htmspecialchars (stackoverflow.com/questions/2109583/…) - so htmlspecialchars(json_encode($foo)) and then json_decode(htmlspecialchars_decode($bar)).

Ken Robinson · Accepted Answer · 2015-01-28 21:18:51Z

0

You can also change this echo statement:

echo '<option value="' . $name . '">' . $cc . '</option>';

to

echo "<option value='$name'>$cc</option>";

so the value is delimited by single quotes instead of double quotes. This should also solve your problem.

answered Jan 28, 2015 at 21:18

Ken Robinson

1

Collectives™ on Stack Overflow

JSON array as value in HTML select

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related