Changing color of text depending on user selection with PHP, CSS and HTML

Question

My assignment asks me to make a select list of colors and then use PHP to print a statement in the color selected. Here's exactly what it said:

Make an HTML form with a select-option list with the following color options: Red, Blue, and Green.

When the user makes a selection and clicks the submit button display the following line in whatever color they selected. If they choose red, for example, it would look like...

Color me happy

Use a CSS class to set the color of the text.

THIS IS WHAT HE SAID TO DO:

HTML

    <p>
    <select name="colorchoice" size="1">
    <option value="redtext">Red</option>
    <option value="bluetext">Blue</option>
    <option value="greentext">Green</option>
    </select>
    </p>
    <p>
    <input type="submit" value="Submit Information">
    </p>

PHP

    <?php
    $colorvalue = $_POST['colorchoice'];
    print "<span class='".$colorvalue."'> Color me happy.</span>";
    ?>

Obviously, this doesn't work without some CSS, which he so helpfully didn't mention.

add this in your CSS -> .redtext{color:red;} .bluetext{color:blue;} .greentext{color:green;} — Lal
– Lal, Commented Aug 24, 2015 at 18:05
Change the $_POST to $_GET, because by default a form submits its data with the GET-method, if you missed it - i can't see any form wrapper — Jon Lamer
– Jon Lamer, Commented Aug 24, 2015 at 18:09
The added classes were my first step. Just changed post to get in both the HTML and PHP. We have not covered get in class yet lol. There is a form wrapper, I just didn't include it. Still not working though. — Thomas
– Thomas, Commented Aug 24, 2015 at 18:09

Jon Lamer · Accepted Answer · 2015-08-24 18:21:56Z

1

Keeping everything as simple as possible for your sake

<style>
    .red   { color: red; }
    .green { color: green; }
    .blue  { color: blue; }
</style>

<form>
    <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select>
    <input type="submit" value="Color me!">
</form>

<?php
    if ( isset($_GET['color']) ) {
        print '<span class="' . $_GET['color'] . '">Color me happy.</span>';
    }
?>

answered Aug 24, 2015 at 18:21

Jon Lamer

4486 silver badges13 bronze badges

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

1 Comment

Thomas Over a year ago

Care to elaborate on the difference between $_POST and $_GET? Get has not even been mentioned in class yet...

MrK · Accepted Answer · 2015-08-24 18:18:24Z

myform.html:

<form action="ColorMe.php" method="post">
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<br/>
<input type="submit" value="Set Color"/>
</form>

ColorMe.php:

<?php
//Session is started for a PHP cookie to be resumed/created:
session_start();

//Gets the color from the form:
$Color = $_POST['color'];

//Sets the color to the PHP session UserColor:
$_SESSION['UserColor'] = $Color;

//Redirects to whatever page you want
header("Location: /MyPage.php");

MyPage.php:

<?php 
//Starts the session again to make the PHP session resources available:
session_start();

//Checks if the PHP session variable has been set:
if(isset($_SESSION['UserColor'])){

//If it is set: make $Color be whatever user selected:
$Color = $_SESSION['UserColor'];

}

//Otherwise, if not set:
else{

//Default color will be black:
$Color = "black";
}
?>
<html>
<head>
<title>My Colored Page</title>
</head>
<body>
<h1 style="color: <?php echo $Color; ?>;">Colored Text</h1>
<p style="color:<?php echo $Color; ?>;">Colored paragraph.</p>
</body>
</html>

Is this what you wanted? :)

Rahul Kumar · Accepted Answer · 2015-08-24 18:39:39Z

1

color.html file code:

<form action=color.php method=post
<select name="colorchoice">
<option value="red">Red</option>
<option value="blue">Blue</option
<option value="green">Green</option>
</select>
<input type="submit"/>
</form>

color.php file code:

<?php
$colorvalue=$_POST['colorchoice'];
echo "<span style='color:". $colorvalue."'>Color me happy.</span>";
?>

answered Aug 24, 2015 at 18:39

community wiki

Rahul Kumar

Comments

Mohammed Elhag · Accepted Answer · 2015-08-24 18:43:05Z

1

I think you are new in PHP and HTML so i will give you very simple solution without dificulty , just for now and i wish you all the best

<?php
if (isset($_POST['colorchoice'])) {
$colorvalue =$_POST['colorchoice'];      
print "<span ><font color=".$colorvalue.">Color me happy.</font></span>";
      }else{}    ?>
<form action="#" method=post>

<p> <select  name="colorchoice" size="1">
<option value="redtext">Red</option>
<option value="bluetext">Blue</option>
<option value="greentext">Green</option>
</select>
</p>
<p>
<input type="submit" value="Submit Information"></form>
</p>

NOTE:

when you start codding make sure that you open tag the close it , at your code you forgot to open form tag , so be carefull

edited Aug 24, 2015 at 18:43

answered Aug 24, 2015 at 18:32

Mohammed Elhag

4,3201 gold badge12 silver badges19 bronze badges

Comments

Amir Hossain · Accepted Answer · 2015-08-24 18:09:44Z

0

You can do this

<?php $colorvalue = $_POST['colorchoice'];
if($colorvalue == 'red'){?>
   <span style="color:red"> Red text </span>
 <?php } ?>
 if($colorvalue == 'green'){?>
   <span style="color:green"> green text </span>
 <?php } ?>

Obviously you can add individual class for each color instead of inline css. And make other conditions according to your desire

answered Aug 24, 2015 at 18:09

Amir Hossain

6931 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Changing color of text depending on user selection with PHP, CSS and HTML

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related