Me Again, HTML Form Question This Time

[Vini]

i have a form, like above where a user inputs their project, it gives them drop downs. what i want is:

(it should, but doesnt yet) :: they choose 35% from the 'progress' drop down on the form and it writes (to the SQL DB) 35% to the 'percent' field, but i want it to also, write <img src="/projects/35.gif"> to the 'progress' field. as seen below.




the output should finally look like this, as you can see in the above pic, the bottom entry is how it looks now, but the top two ive hashed about to fix.



can one drop down report two values? and have two names as i require, if so how?

[IBM]

Can't you just parse the response from the form, then put

intInsertPercentage = request("percent_dropdown")

intInsertImageString = "< img src=""/projects/" & intInsertPercentage & ".gif"">"

(Sorry, you didn't say what language you were working in).

You can have multiple values assigned to each element in a drop down, but you then have to dump them into an array to split them back out again...

[Vini]

im working in html/php,

the above doesnt mean a lot to me

[IBM]

oh well, you're going to have to wait for a PHP bod then. I'm pretty sure that it must work on a very similar level for PHP too though...just get the variable from the drop down, and then use the variable to create your insert value for the percentage field, and build a string for the insert value of the image string....

Anyways, luck.

[Iain]

yep you're right ibm

First thing though Vini, you don't need an image and you shouldn't be saving the percentage symbol in the database, it's a reserved character for free text searches and will just end up causing you problems.

First thing to do is set your percentage field to be an integer. Then just save the number 35, 95, etc. Now when you retrieve your percentage as a number you just create a div of a specific width and height which looks like a bar and more importantly can represent any number from 0-100 without the need for an image.

First add this into your style sheet

.percentBar {
	height: 10px;
	background: #003366;}

Then insert the php below, obviously modify it to suit your purposes e.g. get all fields from the table rather than just percentage

$sqlQuery = "SELECT percentage FROM table";
    $sqlResult = mysql_query($sqlQuery)
    
    while ($sqlRow = mysql_fetch_array($sqlResult))
    {
        echo '<td><div class="percentBar" width="'.$sqlRow['percent'].'px"></div></td>';
    } 

Modify the colour and height of the bar using the style sheet. Voila, no image, and it can show any percentage value you throw at it. If you want to see a similar version of it in action look at the "orange X's" you get on HEXUS for relevance in search results or to show a user's rating. It's basically a div with a background of five x's which are masked by a div of a variable width to give the illusion of it being a sliding scale.

[Vini]

how do i also show the figure aswell? thanks again iain!

got it displaying, not sure how to color the forefront.

.percentBar {
   height: 5px;
   background: #c0c0c0;}

is presumably just the bg, where do i set the fore colour?

[mike_w]

how do i also show the figure aswell? thanks again iain!

got it displaying, not sure how to color the forefront.

.percentBar {
   height: 5px;
   background: #c0c0c0;}

is presumably just the bg, where do i set the fore colour?

Well, the bar would just be the colour of the background... if you wanted a background which was the full width, I assume you would create another div, set padding and margins to 0, and set the background colour to something different, while the width is set to however many pixels represents 100%.

If you wanted to use a picture for the bar, then you could just add that in using CSS: background-image:url(whatever.png);

[Vini]

hmm confused by this bit, this is what i got now

[Iain]

The idea was that the bar is the foreground, you don't need a background. If you need one e.g. a light grey which the blue colour "fills up" then as Mike says you just nest some divs, one is the full width and the other one with the dynamic width sits inside.

[Iain]

Vini, copy the HTML from the source for the table cell with the bar in it, we can't tell anything from an image

[Vini]

Vini, copy the HTML from the source for the table cell with the bar in it, we can't tell anything from an image

apologies

<html>
<head><title>Projects</title>
<style type="text/css">
     cell {
                background: #f0f0f0;
                font: 12px normal Verdana, Arial, sans-serif;}
    th#tableheader, tr#tableheader {
                background: #3F789A;
                border: 1px solid #000000;
                font: 12px normal Verdana, Arial, sans-serif;
                font-weight: bold;
                color: #ffffff;}
    td#tabledata {
                border: 1px solid #000000;
                font: 12px normal Verdana, Arial, sans-serif;
                color: #336699;}
    .percentBar {
                height: 5px;
                background: #c0c0c0;
                }
</style>
</head>
<body bgcolor="#f0f0f0">
<?
    $DBhost = 'localhost';
    $DBuser = 'vini';
    $DBpass = 'gumpy307';
    $DBName = 'projects';
    $table = 'projects';
    mysql_connect($DBhost,$DBuser,$DBpass) or die('Unable to connect to database');
    @mysql_select_db($DBName) or die('Unable to select database '.$DBName);


    $sqlquery = "SELECT * FROM $table ORDER BY project";
    $result = mysql_query($sqlquery);

    if (mysql_num_rows($result) < 1)
    {
        echo '<center><p>There Were No Results for Your Search</center>';
    } else {
        echo '<div class=contact><table width="535" align="center">';
                    echo '<tr>
                    <th id="tableheader">Project</th><th colspan="2" width="200" id="tableheader">Progress</th><th id="tableheader">Status</th><th id="tableheader">Proposed End</th>';
            while ($row = mysql_fetch_array($result))
        {

               echo'<tr><td id="tabledata"><b>'.$row['project'].'</b></td>
                    <td id="tabledata"><div class="percentBar" width="'.$row['percent'].'px">&nbsp;</div></td>
                    <td align="center" id="tabledata" width="30"><b>'.$row['percent'].'%</b></td>
                    <td align="center" id="tabledata"><b>'.$row['status'].'</b></td>
                    <td align="center" id="tabledata"><b>'.$row['day'].'/'.$row['month'].'/'.$row['year'].'</b></td>
                </tr>';
        }
        echo '</table></div>';
    }
?>


<br><br>
</body></html>

[Iain]

I mean the HTML that's output, not your PHP code

[Vini]

would there be a way to get the "bar" to change colour at certain percentage points. ie red, upto 60%, orange upto 80% and green 80% upwards? or am i asking too much?

above is my code for 'show.php' thats all i have...

[mike_w]

would there be a way to get the "bar" to change colour at certain percentage points. ie red, upto 60%, orange upto 80% and green 80% upwards? or am i asking too much?

above is my code for 'show.php' thats all i have...

You could use PHP code to use a different div class depending on the perecentage.

e.g.

if (0 <= $sqlRow['percent'] AND $sqlRow['percent'] < 10){
echo '<td><div class="percent0to10" width="'.$sqlRow['percent'].'px"></div></td>';
}

And then change the colour of the divs accordingly (and obviously changing the code to suit your needs).

Edit: Actually, you'd be better off using a switch rather than an if statement. If memory serves, it would be something like this (at a guess):

switch (TRUE){

case (0 <= $sqlRow['percent'] AND $sqlRow['percent'] < 10):
echo '<td><div class="percent0to10" width="'.$sqlRow['percent'].'px"></div></td>';
break;

case (10 <= $sqlRow['percent'] AND $sqlRow['percent'] < 20):
echo '<td><div class="percent10to20" width="'.$sqlRow['percent'].'px"></div></td>';
break;

}

[Iain]

Think he was after a div that changes colour through its lenght mike rather than one that changes the whole bar. If that is what you;re after Vini then you'll need a background image on the div that goes up the colour range.

Also, maybe I wasn't making myself clear but I need to see the HTML, you know the thing you get if press View Source on the page..... It's the sort of thing you should be doing every time you spot bugs like that, the source of the page will tell you a lot

[Vini]

ill post it tomrrow when im backat work