Button disabled before other buttons clicked


#21

I see it all the time? Here's entire page code:

<?php require_once('Connections/eam.php'); ?>

<?php 

$colname_rsHardwareAsset = "-1";
if (isset($_GET['recordID'])) {
  $colname_rsHardwareAsset = $_GET['recordID'];
}



if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
  $insertSQL = sprintf("INSERT INTO maintenance_history (
						by_staff,
						date_completed,
						maint_comm,
						maint_id) 
						
						VALUES (%s, %s, %s, %s)",

					   GetSQLValueString($_POST['by_staff'], "text"),
                       GetSQLValueString(date('Y-m-d'), "text"),
					   GetSQLValueString($_POST['maint_comm'], "text"),
					   GetSQLValueString($colname_rsHardwareAsset, "text")
					   );
	
		
									   

  mysql_select_db($database_eam, $eam);
  $Result1 = mysql_query($insertSQL, $eam) or die(mysql_error());

  $insertGoTo = "MaintenanceDone.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
    $insertGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $insertGoTo));
}


mysql_select_db($database_eam, $eam);
$query_rsHardwareAsset = sprintf("SELECT * FROM assets_hardware WHERE asset_hardware_id = %s", GetSQLValueString($colname_rsHardwareAsset, "int"));
$rsHardwareAsset = mysql_query($query_rsHardwareAsset, $eam) or die(mysql_error());
$row_rsHardwareAsset = mysql_fetch_assoc($rsHardwareAsset);
$totalRows_rsHardwareAsset = mysql_num_rows($rsHardwareAsset);
 

mysql_select_db($database_eam, $eam);
$query_rsMaintenanceHistory = sprintf("SELECT * FROM maintenance_history WHERE maint_id = %s", GetSQLValueString($colname_rsHardwareAsset, "int"));
$rsMaintenanceHistory = mysql_query($query_rsMaintenanceHistory, $eam) or die(mysql_error());
$row_rsMaintenanceHistory = mysql_fetch_assoc($rsMaintenanceHistory);
$totalRows_rsMaintenanceHistory = mysql_num_rows($rsMaintenanceHistory);
 
$pageTitle="Start Maintenance"; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
       <script>
            $(() => {
                'use strict';
                 $('.donebutton').click(function() {
                    $(this).toggleClass('pressed');
                    if ($('.pressed').length === $('.donebutton').length) {
                        $("finaltable").show();
                    }
                });
            });
        </script>

<?php include('includes/header.php'); ?>
    
	
	
		
		
		
      <table border="0" align="center" cellspacing="0" class="tableDetails1" style"margin:0 auto;width 600px;">
      <tr>
        <td style="font-size:100%">
		
          <fieldset>
          <legend>Maintenance
		  	  <i class="fa fa-print fa-lg" aria-hidden="true" onclick="goPrint()" onmouseover="" style="cursor: pointer;float:right;" ></i> 
	  <i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true" onclick="goBack()" onmouseover="" style="cursor: pointer;float:right;">&ensp;</i>	
		  </legend>
		  <center><p><h4>Asset maintenance procedure</h4></p></center>
		  <center><p><h5>WSL Tool No.: <?php echo $row_rsHardwareAsset['wsltoolno']; ?></h5></p></center>
			
			<hr />
			
			<?php if($row_rsHardwareAsset['maint1'] != "") { ?>
			<table class="tableDetails2">
			<tr>
            <th>Step 1</th>
            <td><?php echo $row_rsHardwareAsset['maint1']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } else echo "<center><h4>Please fill atleast one instruction step to start maintenance!</h4></center>" ?>
			
			<?php if($row_rsHardwareAsset['maint2'] != "") { ?>
			<table class="tableDetails2">
            <tr>
              <th>Step 2</th>
              <td><?php echo $row_rsHardwareAsset['maint2']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint3'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 3</th>
              <td><?php echo $row_rsHardwareAsset['maint3']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint4'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 4</th>
              <td><?php echo $row_rsHardwareAsset['maint4']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint5'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 5</th>
              <td><?php echo $row_rsHardwareAsset['maint5']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint6'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 6</th>
              <td><?php echo $row_rsHardwareAsset['maint6']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint7'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 7</th>
              <td><?php echo $row_rsHardwareAsset['maint7']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php }  ?>
			
			<?php if($row_rsHardwareAsset['maint8'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 8</th>
              <td><?php echo $row_rsHardwareAsset['maint8']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint9'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 9</th>
              <td><?php echo $row_rsHardwareAsset['maint9']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint10'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 10</th>
              <td><?php echo $row_rsHardwareAsset['maint10']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
	  
	  
	  <form action="<?php echo $editFormAction; ?>" method="post" name="form1">
	  
	  
	  <?php if($row_rsHardwareAsset['maint1'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Comments</th>
              <td><textarea name="maint_comm" cols="40"></textarea></td>
            </tr>
			</table>
			<hr />
			
			
		<p>
        <label for="User">User</label>
        <input type="text" name="by_staff" value="<?php echo $_SESSION['MM_Username'];?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
		</p>
		<p>
		<label for="User">Date</label>
        <input type="text" name="date_completed" value="<?php echo date("Y-m-d");?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
        </p>	
		<?php } ?>
	  
	  
	
      <p class="submit">
        <input type="submit" value="Submit"  />
      </p>
      <input type="hidden" name="MM_insert" value="form1" />
      </fieldset>
	  
    </form> 
     
	</td>
<?php include('includes/footer.php'); ?>
<?php
mysql_free_result($rsVendors);
mysql_free_result($rsPlatform);
mysql_free_result($rsHardwareType);
mysql_free_result($rsDivision);
mysql_free_result($rsLocation);
mysql_free_result($rsHardwareStatus);
mysql_free_result($rsMonitorSize);
?>

#22

How do you expect these two things to interact? :stuck_out_tongue:

$(".submit").show();

and CSS it so that the submit class is defined as display: none.


#23

Not that good with codding, had a clue this needs changing and tried with "submit" but didn't worked, I see the point now.

<p class="submit">
<input type="submit" value="Submit" class="display:none" />
</p>

would this be correct? Or should I create another class in css file?


#24

It'll be cleaner to read and adjust if you put it into the CSS file.

.submit {
 display:none;
}

(putting it inline would be style= , not class=, and it would go in the p tag, not the input.)


#25

Done, but I can still see "SUBMIT" button.. :confused:

EDIT: It now works, some why mysql querry was interfering the button.

Any ideas why onclick="this.disabled = true" stopped working? Is it something to do with CSS?

EDIT 2: How can I change "SUBMIT" button styling to match others? At the moment it's tiny and hardly noticeable.


#26

=>

.submit, .Donebutton {

#27

Tried quite few ways, all came up with this result:


#28

er.. woops. thats because the submit class is applied to the p not the button.

.submit input, .Donebutton {


#29

Nice one, I didn't knew that "input" can be described here as well.

Works fine now.

For the same page, if anyone have decent PHP skills, there must be error somewhere why when submitting form it won't go to success page. It is called $insertGoTo = "MaintenanceDone.php";

It does record data into DB but stays in the same page..


#30

if you're going to set a header in PHP, you have to do it with:
a script that starts at character 1 on line 1 of the page
that script does not echo anything out prior to the header call.
any white space outside of a <?php tag counts as echoing things out.

(Hint: the piece of script that your header call is in starts on line 3.)


#31

Ha, found it, works as it should :+1:

And because I had to add class for my "DONE" buttons, I think that's the reason why onclick="this.disabled = true" stopped working? How can I make it work again?


#32

Let's stick it into the jquery so it's easier to find if we need to change something, rather than having it inline..

$(this).toggleClass('pressed');

=>

$(this).toggleClass('pressed');
$(this).prop('disabled',true);

#33

Is 'disabled' another class? Because it doesn't work just by replacing the code..


#34

So if i've followed everything you've done to this point, it should work.

Here's my version, i've removed most of the PHP because i dont have your databases etc.
Also i shorthanded the 10 tables into 1 while loop. For my own sanity, mostly.

<?php $row_rsHardwareAsset = array("wsltoolno"=>10,"maint1"=>"1","maint2"=>"2","maint3"=>"3","maint14"=>"4","maint15"=>"5","maint16"=>"6","maint17"=>"7","maint18"=>"8","maint19"=>"9","maint110"=>"10"); ?>
<style>
.submit input,.donebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #cccccc));
	background:-moz-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-o-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:linear-gradient(to bottom, #ededed 5%, #cccccc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#cccccc',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #8E8E8E;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	width: 200px;
	padding:10px 10px 10px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff; 
}

.submit {
    display: none;
}

.donebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-o-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:linear-gradient(to bottom, #cccccc 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ededed',GradientType=0);
	background-color:#cccccc;
	text-decoration-color: #000;
}	
	
.pressed {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00CC14), color-stop(1, #008E0B));
	background:-moz-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-webkit-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-o-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-ms-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:linear-gradient(to bottom, #00CC14 5%, #008E0B 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC14', endColorstr='#008E0B',GradientType=0);
	background-color:#8FEA6B;
	border:1px solid #00CC14;
	color:#ffffff;
	text-shadow:0px 1px 0px #000000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
       <script>
            $(() => {
                'use strict';
                 $('.donebutton').click(function() {
                    $(this).toggleClass('pressed');
                    $(this).prop('disabled',true);
                    if ($('.pressed').length === $('.donebutton').length) {
                        $(".submit").show();
                    }
                });
            });
        </script>

<?php include('includes/header.php'); ?>
    
	
	
		
		
		
      <table border="0" align="center" cellspacing="0" class="tableDetails1" style"margin:0 auto;width 600px;">
      <tr>
        <td style="font-size:100%">
		
          <fieldset>
          <legend>Maintenance
		  	  <i class="fa fa-print fa-lg" aria-hidden="true" onclick="goPrint()" onmouseover="" style="cursor: pointer;float:right;" ></i> 
	  <i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true" onclick="goBack()" onmouseover="" style="cursor: pointer;float:right;">&ensp;</i>	
		  </legend>
		  <center><p><h4>Asset maintenance procedure</h4></p></center>
		  <center><p><h5>WSL Tool No.: <?php echo $row_rsHardwareAsset['wsltoolno']; ?></h5></p></center>
			
			<hr />
			
			<?php if($row_rsHardwareAsset['maint1'] == "") { echo "<center><h4>Please fill atleast one instruction step to start maintenance!</h4></center>"; } ?>
            <?php $i = 1;
            while(isset($row_rsHardwareAsset['maint'.$i]) && $row_rsHardwareAsset['maint'.$i] != "") { ?>
			<table class="tableDetails2">
			<tr>
            <th>Step <?php echo $i; ?></th>
            <td><?php echo $row_rsHardwareAsset['maint'.$i]; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php $i++;
            } ?>
			
	  
	  <form action="<?php echo $editFormAction; ?>" method="post" name="form1">
	  
	  
	  <?php if($row_rsHardwareAsset['maint1'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Comments</th>
              <td><textarea name="maint_comm" cols="40"></textarea></td>
            </tr>
			</table>
			<hr />
			
			
		<p>
        <label for="User">User</label>
        <input type="text" name="by_staff" value="<?php echo $_SESSION['MM_Username'];?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
		</p>
		<p>
		<label for="User">Date</label>
        <input type="text" name="date_completed" value="<?php echo date("Y-m-d");?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
        </p>	
		<?php } ?>
	  
	  
	
      <p class="submit">
        <input type="submit" value="Submit"  />
      </p>
      <input type="hidden" name="MM_insert" value="form1" />
      </fieldset>
	  
    </form> 
     
	</td>
<?php include('includes/footer.php'); ?>

This code works in my testbed.


#35

As I have modified my code can't simply replace with the one you just pasted in, I have tried, but there was still no joy.

I have attached picture in all conditions, from top - no action; hover; clicked and hover; clicked no hover (active).

Here's my up to date page code (bear in mind I had to use display:none in line because if I use in CSS all buttons in other pages disappears):

<?php require_once('Connections/eam.php'); ?>
<?php 
$maintID = "-1";
if (isset($_GET['recordID'])) {
  $maintID = $_GET['recordID'];
}
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
  $insertSQL = sprintf("INSERT INTO maintenance_history (
						by_staff,
						date_completed,
						maint_comm,
						maint_id) 
						
						VALUES (%s, %s, %s, %s)",

					   GetSQLValueString($_POST['by_staff'], "text"),
                       GetSQLValueString(date('Y-m-d'), "text"),
					   GetSQLValueString($_POST['maint_comm'], "text"),
					   GetSQLValueString($maintID, "text")
					   );
	
		
									   

  mysql_select_db($database_eam, $eam);
  $Result1 = mysql_query($insertSQL, $eam) or die(mysql_error());

  $insertGoTo = "MaintenanceDone.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
    $insertGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $insertGoTo));
}
$colname_rsHardwareAsset = "-1";
if (isset($_GET['recordID'])) {
$colname_rsHardwareAsset = $_GET['recordID']; }

mysql_select_db($database_eam, $eam);
$query_rsHardwareAsset = sprintf("SELECT * FROM assets_hardware WHERE asset_hardware_id = %s", GetSQLValueString($colname_rsHardwareAsset, "int"));
$rsHardwareAsset = mysql_query($query_rsHardwareAsset, $eam) or die(mysql_error());
$row_rsHardwareAsset = mysql_fetch_assoc($rsHardwareAsset);
$totalRows_rsHardwareAsset = mysql_num_rows($rsHardwareAsset);
 
mysql_select_db($database_eam, $eam);
$query_rsMaintenanceHistory = sprintf("SELECT * FROM maintenance_history WHERE maint_id = %s", GetSQLValueString($colname_rsHardwareAsset, "int"));
$rsMaintenanceHistory = mysql_query($query_rsMaintenanceHistory, $eam) or die(mysql_error());
$row_rsMaintenanceHistory = mysql_fetch_assoc($rsMaintenanceHistory);
$totalRows_rsMaintenanceHistory = mysql_num_rows($rsMaintenanceHistory);?> 
<?php $pageTitle="Start Maintenance"; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
       <script>
            $(() => {
                'use strict';
                 $('.donebutton').click(function() {
                    $(this).toggleClass('pressed');
                    $(this).prop('disabled',true);
                    if ($('.pressed').length === $('.donebutton').length) {
                        $(".submit").show();
                    }
                });
            });
        </script>

<?php include('includes/header.php'); ?>
            <table border="0" align="center" cellspacing="0" class="tableDetails1" style"margin:0 auto;width 600px;">
      <tr>
        <td style="font-size:100%">
		
          <fieldset>
          <legend>Maintenance
		  	  <i class="fa fa-print fa-lg" aria-hidden="true" onclick="goPrint()" onmouseover="" style="cursor: pointer;float:right;" ></i> 
	  <i class="fa fa-home fa-lg" aria-hidden="true" onclick="location.href='index.php';" onmouseover="" style="cursor: pointer;float:right;">&ensp;</i>
	  <i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true" onclick="goBack()" onmouseover="" style="cursor: pointer;float:right;">&ensp;</i>	
		  </legend>
		  <center><p><h4>Asset maintenance procedure</h4></p></center>
		  <center><p><h5>WSL Tool No.: <?php echo $row_rsHardwareAsset['wsltoolno']; ?></h5></p></center>

			<hr />
			
			<?php if($row_rsHardwareAsset['maint1'] != "") { ?>
			<table class="tableDetails2">
			<tr>
            <th>Step 1</th>
            <td><?php echo $row_rsHardwareAsset['maint1']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' >DONE</button></center>
			<hr />
			<?php } else echo "<center><h4>Please fill atleast one instruction step to start maintenance!</h4></center>" ?>
			
			<?php if($row_rsHardwareAsset['maint2'] != "") { ?>
			<table class="tableDetails2">
            <tr>
              <th>Step 2</th>
              <td><?php echo $row_rsHardwareAsset['maint2']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint3'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 3</th>
              <td><?php echo $row_rsHardwareAsset['maint3']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint4'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 4</th>
              <td><?php echo $row_rsHardwareAsset['maint4']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint5'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 5</th>
              <td><?php echo $row_rsHardwareAsset['maint5']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint6'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 6</th>
              <td><?php echo $row_rsHardwareAsset['maint6']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint7'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 7</th>
              <td><?php echo $row_rsHardwareAsset['maint7']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php }  ?>
			
			<?php if($row_rsHardwareAsset['maint8'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 8</th>
              <td><?php echo $row_rsHardwareAsset['maint8']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint9'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 9</th>
              <td><?php echo $row_rsHardwareAsset['maint9']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
			
			<?php if($row_rsHardwareAsset['maint10'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Step 10</th>
              <td><?php echo $row_rsHardwareAsset['maint10']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button class='donebutton' onclick="this.disabled = true">DONE</button></center>
			<hr />
			<?php } ?>
	  
	  
	  <form action="<?php echo $editFormAction; ?>" method="post" name="form1">
	  
	  
	  <?php if($row_rsHardwareAsset['maint1'] != "") { ?>
			<table class="tableDetails2">
			<tr>
              <th>Comments</th>
              <td><textarea name="maint_comm" cols="40"></textarea></td>
            </tr>
			</table>
			<hr />
			
			
		<p>
        <label for="User">User</label>
        <input type="text" name="by_staff" value="<?php echo $_SESSION['MM_Username'];?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
		</p>
		<p>
		<label for="User">Date</label>
        <input type="text" name="date_completed" value="<?php echo date("Y-m-d");?> " size="8" STYLE="background-color: #F2EFE9;" readonly>
        </p>	
		<?php } ?>
	  
	  
	<center><p><button class='button' onclick="window.history.go(-1); return false;">Cancel</button></p></center>
    <center> <p class="submit" style="display:none">
        <input type="submit" value="Submit" />
      </p></center>
	  
      <input type="hidden" name="MM_insert" value="form1" />
	  
      </fieldset>
	  
    </form> 
     
	</td>
<?php include('includes/footer.php'); ?>

and the relative css (please note I use style Button to match other buttons style):

Button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #cccccc));
	background:-moz-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-o-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:linear-gradient(to bottom, #ededed 5%, #cccccc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#cccccc',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #8E8E8E;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	width: 200px;
	padding:10px 10px 10px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
Button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-o-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:linear-gradient(to bottom, #cccccc 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ededed',GradientType=0);
	background-color:#cccccc;
	text-decoration-color: #000;
}

  
.submit input, .donebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #cccccc));
	background:-moz-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-o-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #cccccc 100%);
	background:linear-gradient(to bottom, #ededed 5%, #cccccc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#cccccc',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #8E8E8E;
	display:inline-block;
	cursor:pointer;
	color:#777777;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	width: 200px;
	padding:10px 10px 10px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff; 
}

.donebutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-o-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:linear-gradient(to bottom, #cccccc 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ededed',GradientType=0);
	background-color:#cccccc;
	text-decoration-color: #000;
}	
	
.submit input:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-o-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #cccccc 5%, #ededed 100%);
	background:linear-gradient(to bottom, #cccccc 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ededed',GradientType=0);
	background-color:#cccccc;
	text-decoration-color: #000;
}
	
	
.pressed {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00CC14), color-stop(1, #008E0B));
	background:-moz-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-webkit-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-o-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:-ms-linear-gradient(top, #00CC14 5%, #008E0B 100%);
	background:linear-gradient(to bottom, #00CC14 5%, #008E0B 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC14', endColorstr='#008E0B',GradientType=0);
	background-color:#8FEA6B;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #00CC14;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:10px 10px 10px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #000000;
}

#36

And what about that page doesnt work?

If i copy and paste your code, starting with the <script> tag all the way to the bottom, and include my header instead of your PHP, it works.


#37

When you click button "DONE" it should turn GREEN and hover function should be disabled. I had this earlier using :active CSS but now I think it wouldn't work. I was expecting your script would do it but must be issue somewhere?


#38

'hover function should be disabled'... well no, hover never gets disabled, cause you're still hovering over a thing.

What you CAN do is disguise the fact that the hover effect is still happening by telling the browser to define ANOTHER hover behavior that mimics the unhovered behavior.

.pressed {
=>
.pressed, .pressed:hover {


#39

Worked like a charm. Thank you.

I had this solved previously by using onclick function but it stopped working for some reason..

I am learning a lot here, many thanks for your help. :+1:

Can I ask for advise with this bit - I managed to make it count difference of two dates, but because it actually counts time difference once you get past target date it starts counting up (and I need remaining days then show overdue days with negative indicator "-" plus a note ). I have sorted the note but it only works if remaining months and days equals 0.


#40

Well, as we're wandering away from the subject of the OP, for the sake and sanity of those that may come after in this thread (and because people may come looking for answers to this second thing), create a new thread for this, and show me the relevant code you're trying to fix.