www.webdeveloper.com
Results 1 to 9 of 9

Thread: simple php? targeting a form value

  1. #1
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281

    simple php? targeting a form value

    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.

    HTML Code:
    <?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>

  2. #2
    Join Date
    Nov 2006
    Posts
    73
    Try this one:
    PHP Code:
    <?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)...
    Last edited by MatMel; 11-24-2006 at 09:57 AM.

  3. #3
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    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

  4. #4
    Join Date
    Nov 2006
    Posts
    73
    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 )

  5. #5
    Join Date
    Sep 2005
    Location
    That shadow behind you? It's not the cat. Mwahaha
    Posts
    386
    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:
    PHP Code:
    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 Code:
    <?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"???

  6. #6
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    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

    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.
    Last edited by abz; 11-24-2006 at 02:15 PM.

  7. #7
    Join Date
    Sep 2005
    Location
    That shadow behind you? It's not the cat. Mwahaha
    Posts
    386
    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....

  8. #8
    Join Date
    Sep 2005
    Location
    That shadow behind you? It's not the cat. Mwahaha
    Posts
    386
    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.
    HTML Code:
    <!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 Code:
    <?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.
    Last edited by AmazingAnt; 11-24-2006 at 05:36 PM.
    GET FIREFOX!!!!

    Quote Originally Posted by shane.carr in his signature
    Don't respond by saying "Why don't you ..."
    when I state in my previous post "I don't want to ..."

  9. #9
    Join Date
    Oct 2006
    Location
    Lancashire, UK
    Posts
    281
    wow, thanks for all that 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

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles