PHP Array changing font color from user input

Question

I am making a form and it works, but I want to make it where when a user inputs a specific color the results are in the color that he/she chooses. So if a user enters the word Green as his favorite color the results would be Green and in Green text, same with blue,red etc.

The form is working except for the color part and I was looking at a solution outside of an else if loop.

I commented out one line from when it was originally working

<?php
$your_name = $_POST['yourName'];
$your_color = $_POST['yourColor'];
$colors = [
    'red' => '#ff0000',
    'blue' => '#0000ff',
    'green' => '#008000',
    'yellow' => '#ffff00',
    'purple' => '#800080',
    'orange' => '#ffa500',
    'brown' => '#a52a2a',
    'black' => '#000000',
    'white' => '#ffffff',
    'pink' => '#ffc0cb',
    ];
?>


<!DOCTYPE html>

<html>
<head>
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css">
    <style>

    </style>
</head>

<body>
    <div id="content">
        <h1>This is the Second Page</h1>
        <p> Hello <?php echo $your_name; ?></p>
        <!-- <p> Your Favorite Color is <?php echo $your_color; ?></p> -->
        <p> Your Favorite Color is <? echo $colors[strtoupper($your_color)]; ?> </p>
        <p><a href="first.html"> Go Back</a></p>
    </div>
</body>
</html>

Here is the error that i am getting.

Your Favorite Color is #0000ff

So obviously its not in blue text.

you array indices are set with lower cases yet you use strtoupper along with the string to access it thus the undefined index. — Kevin
– Kevin, Commented Aug 29, 2019 at 4:06
and at least add a fall back, just add a simple ternary, you never know they have a favorite color fuchia — Kevin
– Kevin, Commented Aug 29, 2019 at 4:06
I changed it to strtolower still receiving the same error. — Jabo2531
– Jabo2531, Commented Aug 29, 2019 at 4:41
If you are trying to get the text to be the right color, then you need to apply the color to a style or something: Your favorite color is <span style="color: <?php echo $colors[strtolower($your_color)]; ?>"><?php echo strip_tags($your_color) ?></span> — Rasclatt
– Rasclatt, Commented Aug 29, 2019 at 4:55
It’s not an error, it’s giving you exactly what you’re asking for. You’re asking for the value corresponding to ‘blue’ in the $colors array, and so it dutifully prints out 0000ff. If you want to have the html show it as blue text, you need to know how to make an element’s text style be blue. Ask the google how to change html font color. — Tim Morton
– Tim Morton, Commented Aug 29, 2019 at 4:58

Tim Morton · Accepted Answer · 2019-08-31 16:07:48Z

To answer your question, you can use style to make your text colored.

<p> Your Favorite Color is <span style=“color: <?= $colors[strtoupper($your_color)]; ?> “><?= $your_color ?> </p>

However, you should never trust user input!

So, for example, use html entities when you assign your variable

<?php
$your_name  = htmlentities($_POST['yourName']);
$your_color = htmlentities($_POST['yourColor']);

For assigning the color, putting the color values in an array is an effective way to decouple user input, but the problem is that unless you check for invalid keys, you might get a color you’re not expecting and generate a warning. What would happen if the user types “chartreuse” as their favorite color?

<?php print  $color[‘chartreuse’]; ?>

There is no key named “chartreuse”, so php will print out a warning. You don’t want your users to see that. Do this instead

$colors = [
    'red' => '#ff0000',
    'blue' => '#0000ff',
    'green' => '#008000',
    'yellow' => '#ffff00',
    'purple' => '#800080',
    'orange' => '#ffa500',
    'brown' => '#a52a2a',
    'black' => '#000000',
    'white' => '#ffffff',
    'pink' => '#ffc0cb',
];

// initialize
$color_value = ‘’;

// conditionally set based on user input
if(in_array(stringtolower($your_color), $colors)) {
    $color_value = $colors[$your_color];
}

What if you want to tell the user that their choice of color is unsupported? Assign color name at the same time as color value:

$color_value = ‘’;
$color_name = ‘invalid color’;
if(in_array(stringtolower ($your_color), $colors)) {
    $color_value = $colors[$your_color];
    $color_name = $your_color;
}

Now your HTML looks like

<p> Hello <?=$your_name ?></p>
<p> Your Favorite Color is <span style=“color: <?= $color_value ?>”><?= $color_name?> </p>

A better way to change the font color, though, is to use css:

<style >
.blue { color: #0000ff}
.green { color: #008000}

... etc

</style >

Then, all you have to do is specify the class for your colored text; you don’t even have to worry about $color_value:

<p> Your Favorite Color is <span class=“<?= stringtolower ($color_name) ?>”><?= $color_name?> </p>

——-

Update:

Method 1:

<?php
$colors = [
    'red' => '#ff0000',
    'blue' => '#0000ff',
    'green' => '#008000',
    'yellow' => '#ffff00',
    'purple' => '#800080',
    'orange' => '#ffa500',
    'brown' => '#a52a2a',
    'black' => '#000000',
    'white' => '#ffffff',
    'pink' => '#ffc0cb',
];

$submitted = FALSE;

if($_GET[‘submit’]) {

    $submitted   = TRUE;
    $color_value = ‘’;
    $color_name  = ‘invalid color’;
    $your_color  = htmlentities($_GET[‘color’]);
    $your_name   = htmlentities($_GET[‘name’]);

    if(in_array(stringtolower ($your_color), $colors)) {
        $color_value = $colors[$your_color];
        $color_name  = ucwords($your_color);
    }
    // note: if you used post (i.e., to change stored data) you would take action here and then REDIRECT to this or another page. This is called the post/redirect/get pattern)
}
?>
<html>
    <head>
    </head>
    <body>
        <?php if($submitted): ?>
        <p> Hello <?= $your_name ?></p>
        <p style=“color: <?= $color_value ?>” >Your Favorite Color is <?= ucwords($color_name) ?> </p>
        <?php endif; ?>
        <form method=“get”>
            <div>
                <label>Your name:
                    <input type=“text” name=“name”>
                </label>
            </div>
            <div>
                <label>Favorite color:
                    <input type=“text” name=“color”>
                </label>
            </div>
        </form>
    </body>
</html>

Method 2:

<?php
$submitted = FALSE;
if($_GET[‘submit’]) {
    $submitted = TRUE;
    $color_name = htmlentities($_GET[‘color’]);
    $your_name = htmlentities($_GET[‘name’]);
    // note: if you used post (i.e., to change stored data) you would take action here and then REDIRECT to this or another page. This is called the post/redirect/get pattern)
}
?>
<html>
    <head>
        <style>
            .blue { color: #00f; }
            .red { color: #f00; }
            .green { color: #008000; }
            .yellow { color: #ff0; }
        </style>
    </head>
    <body>
        <?php if($submitted): ?>
        <p> Hello <?= $your_name ?></p>
        <p class=“<?= $color_name ?>” >Your Favorite Color is <?= ucwords($color_name) ?> </p>
        <?php endif; ?>
        <form method=“get”>
            <div>
                <label>Your name:
                    <input type=“text” name=“name”>
                </label>
            </div>
            <div>
                <label>Favorite color:
                    <select name=“color”>
                        <option value=“blue”>Blue</option>
                        <option value=“red”>Red</option>
                        <option value=“green”>Green</option>
                        <option value=“yellow”>Yellow</option>
                    </select>
                </label>
            </div>
        </form>
    </body>
</html>

sorry but I been trying everything you have suggested and its just not working. I am new to this and it just cant be that difficult. I am wanting to do is when a user inputs the word RED it will output in a red font, same with blue, green etc.
This was typed in on my phone, so you can’t copy and paste without syntax errors on the quotes. It also could possibly have other typos from fat-fingering... but I don’t see any. I didn’t include a form because your post didn’t have one.
Something you should do is first figure out how to present the html without the dynamic php part. Then insert the php as needed. When I have access to a computer several days from now I’ll amend my answer a bit.
Added examples. They are not copy/paste, and have not been run.

Nouhail Alfidi · Accepted Answer · 2019-08-29 08:22:15Z

Here is what you can do :

<?php
    $your_name = $_POST['yourName'];
    $your_color = $_POST['yourColor'];
    $colors = [
        'red' => '#ff0000',
        'blue' => '#0000ff',
        'green' => '#008000',
        'yellow' => '#ffff00',
        'purple' => '#800080',
        'orange' => '#ffa500',
        'brown' => '#a52a2a',
        'black' => '#000000',
        'white' => '#ffffff',
        'pink' => '#ffc0cb',
     ];
 ?>


<!DOCTYPE html>

<html>
<head>
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css">
    <style>

    </style>
</head>

<body>
    <div id="content">
        <h1>This is the Second Page</h1>
        <p> Hello <?php echo $your_name; ?></p>
        <p> Your Favorite Color is <span style="<?php echo('color:' . $colors[$your_color]); ?>"><? echo $your_color ?></span> </p>
    <p><a href="first.html"> Go Back</a></p>
    </div>
</body>
</html>

Jabo2531 · Accepted Answer · 2019-09-05 07:13:50Z

0

I found the solution to my question after researching and going to multiple sources.

via inline styling I added this

p { color: <?php echo $your_color; ?> ;}

and I changed up the HTML document a little

<body>

    <h1>This is the Second Page</h1>
    <p> Hello <?php echo $your_name; ?></p> 
    <p><a href="first.php"> Go Back</a></p> 

</body>

Now when a user enters their favorite color in the form. The color of the font on the output will be in whatever color they choose.

Thanks everyone for their input, it was very insightful.

answered Sep 5, 2019 at 7:13

Jabo2531

12 bronze badges

Collectives™ on Stack Overflow

PHP Array changing font color from user input

3 Answers 3

Update:

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update:

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related