Change colour of a form button when record is saved

[morrisproject]

Hi,

My layout.php form has many buttons it and a current date field, which all have a unique id/name. when the button is clicked it uses the id and date on the new.php, so when the record is saved it is saved relating to the id and date and other fields are filled in.
the save button takes the user back to layout.php and i want the button to change colour when the record is saved, it would need to use both button id and date because the user might not get all data entered in one day, therfore would have to go back to a particular date to see which buttons where done, as they would display a different colour.

how can i do this?

[raphie]

I guess the information is stored in a database right?

If so query the database and if record is true echo a different state of the button:

<?php
include_once your_connection_page.php
mysql_select_db(yourdatabase);

$q = mysql_query("SELECT `id`,`title`,`date` FROM `your_db_name` WHERE `user` = `".$_SESSION['user']."`;") or die('Error retrieving info!');
$r = mysql_num_rows($q);

if($r > 0){
echo '<ul>';
while($a = mysql_fetch_object($q)){
    echo '<li><form method="get" action="?edit='.$a->id.'">Record "'.$a->title.'" Saved on '.$a->date.'! <input class="recorded" name="submit" type="submit" value="Edit"/></form></li>';
}
echo '</ul>';

}

//here your new record form

?>

This generate a list of all the records stored under the user, when click the button Edit will refresh the page then you have to have a code to receive the $_GET array to populate the form.

[morrisproject]

yes the information is stored in a database.

So how does this code change the colour of a button, when a record is saved? Which page am i supposed to enter this on? layout.php or new.php? Also i dont have 'title' defined anywhere whats that for?

[diafol]

I'm assuming that you want buttons to change colour when a particular section is completed? If so, query the DB for the particular id prior to showing the form.

You just check for valid entries in the relevant fields - if all OK, a variable:

<?php
$buttons = array(
  "employ"  =>  array(
                   'class' => 'btnInc',
                   'value' => 'employment',
                   'id' => 'employment',
                   'label' => 'Employment',
                ),
  "personal"  =>  array(
                   'class' => 'btnInc',
                   'value' => 'personal',
                   'id' => 'personal',
                   'label' => 'Personal Info',
                ),
//... etc for other sections ...  
);

//Individual section checks - check DB
//set $buttons[...section...]['class'] to 'btnDone'

$output="";
foreach($buttons as $button){
	$output .= "\n\t<button id=\"{$button['id']}\" class=\"{$button['class']}\" value=\"{$button['value']}\" name=\"section[]\">{$button['label']}</button>";
}
?>

<!-- head section or css file --> 
<style>
.btnInc{
  	background-color: red;	
}
.btnDone{
	background-color: green;	
}
</style>

<!-- body -->
<form ...>
<?php echo $output;?>
</form>

[morrisproject]

yes relating to the date and button id which was clicked from layout.php, when saving record from new.php.

[diafol]

OK in which case:

<form ...>
<?php echo $output;?>
<input type="hidden" name="id" value="<?php echo $id;?>" />
<input type="hidden" name="date" value="<?php echo $date;?>" />
</form>

[morrisproject]

For example at the moment my code on layout.php looks like this for the buttons on my form:

<p><label><input name="id" type="submit" id="CMD_LRC1138" value="LRC1138"/></label></p>
<p><label><input name="id" type="submit" id="CMD_LRC1115" value="LRC1115"/></label></p>

So when the button is clicked it uses, the value and enters thats into another text box on new.php page. Then the record is saved using that id from the new.php page.

So when the record gets saved, i need to button on layout.php page to change colour.

I have entered your code into my page, does the code need to be in the head tag or above it? as its not doing anything at the moment.

I have changed the array to:

"LRC1138" => array(
'class' => 'btnInc',
'value' => 'LRC1138',
'id' => 'CMD_LRC1138',
'label' => 'LRC1138', ),
"LRC1115" => array(
'class' => 'btnInc',
'value' => 'LRC1115',
'id' => 'CMD_LRC1115',
'label' => 'LRC1115', ),

//... etc for other sections ...
);

Is that correct?

[diafol]

I'd change the submit to buttons, but it may/should work. The name attribute should be 'id[]'. IN your case the value and the label are the same thing if you're using submit, so you just use value - no need for the label item in the array.

Also, I don't see why you use <label> in your html, you don't have label data, so take them off - they're used for pretty much everything other than buttons/submits.

The code I supplied, was only a suggestion, I didn't mean for you to go and change everything! :)

The php goes above all the html,
The style goes in the head (or to external css file)
The form in the body as commented in my previous post.

You'll need to pass the id and the date from newpage - perhaps via post if you are using a form for this purpose - pick up the variables and use them to create a record in MySQL, If the id is new, then you can skip all the mysql checking as there won't be any data there anyway. So all buttons will be btnInc (incomplete).

If the id is in the db (edit mode), then you DO need to check the db for previous data and change the colouring of certain buttons accordingly. How do you pass info to the buttons page for existing id/dates?

[morrisproject]

I dont know how to pass the info to layout.php once the record is saved, thats what i need to know, so i can get the button to check the database with id and date and change the colour of the button.

My layout.php pass the id and date to the new form already using:

<form id="layout" name="layout" method="post" action="new.php">

My form on new.php code is like this for example:
<form action="" method="POST" name="new_form" id="new_form" onSubmit="return validate_form ();" >
<div class="new_table">
<table width="916" align="center">
<tr valign="baseline">
<td width="130" align="right" nowrap="nowrap">Date:</td>
<td colspan="7"><input type="text" name="Date" id="Date" value="<?php echo $Date; ?>" readonly="readonly"/></td>
</tr>
<tr valign="baseline">
<td colspan="8" align="right" nowrap="nowrap">&nbsp;</td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">Conveyor Number:</td>
<td colspan="7"><input type="text" name="ConveyorNumber" id="ConveyorNumber" value="<?php echo $id; ?>" readonly="readonly"/></td>

So i now need to change my button colours when the record is saved, relating to the id and date, because everyday all the buttons would need data entered against them, so eventually i will use the date feild to be able to select the date and check all the buttons had changed colour showing data had been entered, and if not it will indicate which ones hadnt.

if that makes sense?

[diafol]

No I'm lost.

[morrisproject]

Can you tell me what you think i want to do?

[diafol]

No, I have no idea what you want to do. I can't read minds :)

[morrisproject]

My layout.php contains lots of buttons which have a value relating to them to indicate a conveyor number. This page also contains a date field which displays the current date.

When a button is clicked it posts info to new.php. So the button value and date is passed over.
The new.php has a save button to save the record once all data is entered.

I want to be able to change the colour of the button on layout.php once the record has been saved so the user knows its done??

[raphie]

OK, the problem here is that is not clear what you're trying to accomplish..

You had 1 form in layout.php and you want the button change base on the current day right. But then you want to display a list of all the records saved for the week or the month?

In that case the code I wrote is what you need, just change title to name. The color is changed by a CSS...

for example you have class="recorded", then you program the css this way, either in an external css file or between a <style> tag in the head of the page.

<style>
    .recorded {
         background:red;
    }
</style>

but you only apply the recorded class if the record is found.

The code has to be entered in the layout.php, But that was a sample made out of nothing, I didn't have all the info.

[morrisproject]

Yes i want to change the colour of the button relating to the value of the button on layout.php only is the record is saved. It needs to relate to the date field on layout.php as well. So if the date is 21/11/11 on layout.php and the button value is 'Button 1', when the record is saved its saved in the database with refences to the Button 1 and 21/11/11.

I dont want to display the record for the week or the month, i just need the code so it checks the databse for the above information and then changes the colour of the button is the record exists if not the colour doesnt change.

[raphie]

OK, this is it:

This is a example, I will not use any of your names. When the file returns to the page you need to check the data base for today's date. If a row is found then the class recorded is going to be echoed.

<?php
//your php code for your db connection goes here
mysql_connect('host','user','password') or die('Unable to connect!');
mysql_select_db('your_database');

$sql = "SELECT `id_field` FROM `your_table` WHERE `date` = ".date('Y/m/d')." AND `name` = '".$_SESSION['name']."';";
$qry = mysql_query($sql) or die('Unable to get information');
$res = mysql_num_rows($qry);

$class = ($res > 0)? 'class="recorded"' : '';
?>
<!DOCTYPE html>
<head>
<style>
   .recorded{
        border:2px white solid;
        border-radius:5px; //round corner for modern browsers
        -moz-border-radius:5px; //round corner for old mozilla
        -webkit-border-radius:5px; //round corner for old Chrome or Safari
        background: red;
        box-shadow: 0 2px 4px black; //shadow for modern browsers
        -moz-box-shadow: 0 2px 4px black; //shadow for old mozilla
        -webkit-box-shadow: 0 2px 4px black; //shadow for old Chrome or Safari
        font:italic bold 12px/14px sans-serif;
        text-align:center;
   }
</style>
</head>
<body>
   <form>
       <label>Name: <input name="name" value="" /></label>
       <input <?php echo $class; ?> type="submit" name="submit" value="Submit" />
   </form
</body>
</html>

That's all. When the page is loaded will fetch your database for any info on the current day, date format 2011/11/25. Set depending your code. If a record is found will echo the class recorded for the button. I added a sample for the css. Remember that the css has to be linked by an external css file or between the head of the page.