PDA

Click to See Complete Forum and Search --> : simple php? targeting a form value

abz
11-24-2006, 09:15 AM
Hi,
So Im finally dipping my foot into the world of PHP. Im doing a really really basic little step by step thing, trying out includes and cookie things.

I have a little drop down menu where a user can select a colour scheme. I want to save the chosen colour scheme in a cookie, I just cant work out the syntax to target the option value.


<?php
//SET COOKIES
$scheme=VALUE OF DROP DOWN
setcookie("colour",$scheme);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="css">

<form name="css">

Choose a colour scheme:
<select name="colour">
<option value="" selected-"selected"></option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</form>

<a href="1.html">Enter Page!</a>

</div>

</body>
</html>
MatMel
11-24-2006, 09:54 AM
Try this one:

<?php //SET COOKIES
$scheme=$_GET['colour'];
setcookie("colour",$scheme);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="css">
<form name="css" method="get" action="<?PHP echo $_SERVER['PHP_SELF']; ?>">
Choose a colour scheme:
<select name="colour">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
<input type="submit" value="Send">
</form>
<a href="1.html">Enter Page!</a> </div> </body> </html>
1. You have to set "action" in the form. I set the page itself using php
2. You have to put an input field with type "submit" which the user can click to submit the form
3. You have to set the method in the form. Either "get" or "post". You can receive the sent values by using the $_GET or $_POST array on the action page (here the page itself)...
abz
11-24-2006, 10:21 AM
Hey, thanks for that. I tried it out and it works, but its a bit buggy. If i select an option, I have to click ok twice for it to change. Im going to stop working on it for now, but will try to fiddle it later.

thanks again for your help :)
MatMel
11-24-2006, 10:39 AM
You know that the script only writes the cookie?
So there will not be any change on the appearance of the page at all.
(unless you read out the cookie on another page ;))
AmazingAnt
11-24-2006, 11:58 AM
MatMel made a good point.
In addition, you should know that if the page is writing the cookie, the rest of the page is not going to beable to use it either.
So, if you want to fix this, you just need to add something like this:

if (isset($_GET['colour'])){
$colour = $_GET['colour'];
} else if (isset($_COOKIE['colour'])){
$colour = $_COOKIE['colour'];
}

and then instead of having the page use $_COOKIE['colour'] for whatever you're trying to use it for, use $colour. That way it will show up as soon as you set it.

Now if you haven't setup anything to show it's been changed yet, you can do something as simple as echo "You just picked the colour ".$_GET['colour'].".";
Or you can do something like this so that the form stays on the colour they picked.

<?php
if (isset($colour)){
$$colour = " selected=\"selected\"";
}
?>
<select name="colour">
<option value="blue"<?php echo $blue;?>>Blue</option>
<option value="red"<?php echo $red;?>>Red</option>
<option value="green"<?php echo $green;?>>Green</option>
</select>

That way, it will create a variable with their colour selection as it's name, and set it, then put the code into the option for their colour.

Hope that helps!


BTW- Why are we spelling it "colour" instead of "color"??? :confused:
abz
11-24-2006, 02:13 PM
hehe, yes, I have a seperate page that links a css style sheet according to the value chosen. I was hoping that the user wouldnt have to submit the value, just select it, and when the user goes to the next page, it has changed accordingly.

The link to what I have so far is here: http://www.amillward.at-uclan.com/development/story/ (user and passwords - penguin)

It is for a simple exercise at uni. Im just trying to be fancy and do extra bits :D

EDIT: and oh, we are spelling it 'colour' because that is how it is spelt :) I only 'americanify' for CSS/Code reasons, and specifically set aside extra brainpower so I remember to spell it properly when not using it in a code context.
AmazingAnt
11-24-2006, 02:40 PM
Ah, well if you want it to be changed when the user selects the color (without submitting), you'll need to venture into the world of JavaScript. JavaScript might be able to change the hyperlink, so that the next page could get the color through the Get method. In addition, I know that it can change the style attributes of different tags, so you might be able to just set the entire body of the document to have the specified text color.

Since I'm still trying to learn JavaScript myself, I can't exactly help much with it.
Sorry 'bout that.

As to color/colour, sorry. I should really pay more attention to people's location, since I've already gone through this with realise/realize.... :o
AmazingAnt
11-24-2006, 05:32 PM
Remember I said I couldn't help? Ignore that.
The links still stay blue, but I got everything else to change color appropriately.
You'll have to forgive my use of "red" as a variable name, but there it is.
This will change anything within the divider "everything" to the color selected, and will add "?colour=green" to the link.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="everything">
<!--ADD IN NAVIGATION-->
<div id="navigation">
<ul>
<li><a href="index.php" title="Home">Home</a></li>

<li><a href="1.php" title="Step One">Step 1</a></li>
<li><a href="2.php" title="Step Two">Step 2</a></li>
<li><a href="3.php" title="Step Three">Step 3</a></li>
<li><a href="4.php" title="Step Four">Step 4</a></li>
</ul>
</div>

<!--COMTENT BORROWED FROM http://www.legendsandlore.com/sockpuppets.html-->

<h1>How to make a sock puppet!</h1>

<p>Welcome to the online sock puppet tutorial! All information an images displayed here are 'borrowed' from <a href="http://www.legendsandlore.com/sockpuppets.html" title="Borrowed">here</a>.</p>

<p>To make your sock puppet you will need:</p>
<ul class="need">
<li>A Sock</li>
<li>Scissors</li>
<li>Some rigid material (e.g. cardboard)</li>

<li>A small piece of fabric</li>
<li>Glue</li>
<li>Decoration!</li>
</ul>

<p>Thats it! Once you have everything, its time to <a href="1.php" id="otherpage" title="Step One">get started</a>!</p>
</ul>

<!--ADD IN STYLE CHANGES-->
<div id="css">
<form name="css">
Change colour scheme:
<select id="select" onChange="checkColour();">
<option value="" selected-"selected"></option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select><br />
</form>
</div></div>
<script language="JavaScript" type="text/javascript">
function checkColour(){
var red = document.getElementById('select').value;
changeColour(red);
}
function changeColour(newcolour){
var newlink="1.php?colour="+newcolour;
document.getElementById('everything').style.color=newcolour;
document.getElementById('otherpage').href=newlink;
}
</script>
</body>
</html>To get the other pages to use the new colour, add something as simple as this to them. (just before the end of the body tag)

<?php
if (isset($_GET['colour'])){
echo "<script language=\"JavaScript\" type=\"text/javascript\">document.getElementById('everything').style.color=\"".$_GET['colour']."\";</script>";
}
?>

If this is buggy or I can help with anything else, just let me know.
abz
11-24-2006, 06:23 PM
wow, thanks for all that :D I realise the effect would be much more useful/practical to do in AJAX, and in my mind it would be some kind of onchange="changecolour();" function, but alas, I am only being graded on PHP at the moment, javascript was last year :p

I have tried the $_GET method, and it works, but if the user returns to the same page (without doing the form again) then it doesnt work, obviously because the form hasnt been done. Also, i don't necessarily want the background to change when the option is changed, just for the option to be remembered when the next page is loaded. Although thinking about it, I have no idea why I wanted that instead of a go button. meh

I will definately try and convert some of that javaS into php

thanks again for all your help and efforts :)