But I can’t replace Button with .donebutton because all my “DONE” buttons will get the same action as SUBMIT?
I may (probably) have issues somewhere else. My CSS looks like this:
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;
}
Button.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;
}
Button.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, #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;
}
And the page code:
<?php include('includes/header.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(() => {
'use strict';
$('Button').click(function() {
$(this).toggleClass('pressed');
});
});
</script>
<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;"> </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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button 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']; ?> </td>
</tr>
</table>
<center><button onclick="this.disabled = true">DONE</button></center>
<hr />
<?php } ?>
<!-- <p>
<label for="Comments">Comments</label>
<textarea name="maint_comm" cols="32"></textarea>
</p> -->
<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" class="Button.donebutton" />
</p>
<input type="hidden" name="MM_insert" value="form1" />
</fieldset>
</form>
</td>
<?php include('includes/footer.php'); ?>