Button disabled before other buttons clicked

Hi all, I need help again.

I have a check list type form where you click “Done” button when step is completed. Now, I need to add button at the bottom of the page which either:
*Would be visible but if not all step buttons clicked would record data into DB
*Would be not visible and you have to click all step buttons to go further.

Now, the option 1 would be my preference but possibly beyond my programming skills. Second option may force staff to cheat but should be much easier to code.

I will add a comments box which will not be required to proceed. Form will also record user id but is not shown in the code.

Any ideas/thoughts?

The code:

<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 />
			
			<table class="tableDetails2">
			<tr>
            <th>Step 1</th>
            <td><?php echo $row_rsHardwareAsset['maint1']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
            <tr>
              <th>Step 2</th>
              <td><?php echo $row_rsHardwareAsset['maint2']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 3</th>
              <td><?php echo $row_rsHardwareAsset['maint3']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 4</th>
              <td><?php echo $row_rsHardwareAsset['maint4']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 5</th>
              <td><?php echo $row_rsHardwareAsset['maint5']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 6</th>
              <td><?php echo $row_rsHardwareAsset['maint6']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 7</th>
              <td><?php echo $row_rsHardwareAsset['maint7']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 8</th>
              <td><?php echo $row_rsHardwareAsset['maint8']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 9</th>
              <td><?php echo $row_rsHardwareAsset['maint9']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
			
			<table class="tableDetails2">
			<tr>
              <th>Step 10</th>
              <td><?php echo $row_rsHardwareAsset['maint10']; ?> &nbsp;</td>
            </tr>
			</table>
			<center><button onclick="this.disabled = true">DONE</button></center>
			<hr />
	  
	    
      
 
     
      </fieldset>
	</td>

Is this sentence correct? If so, what’s the action when the step buttons ARE clicked?

I may have made it too short. In that case, if not all buttons been clicked, there would be an record which would contain data about which step hasn’t been completed.

Anyway, I am more than likely going with second option where button is visible (or shall I say clickable) only when all steps done.

I could do with advise how to show button if the data field is not null, as some equipment may have only 2 steps so clicking all 10 buttons would be seamless…

I know my code is not perfect but it’s project for myself and just trying to remember how to code.

What type of fields are being put in? You’ve just shown us a PHP echo, but not what type of field goes in its place.

Two fields will be sent to DB - user id & comments (user id will be auto filled by using <?php echo $_SESSION['MM_Username']; ?> and the comments will simply update current field in DB)

I will add these shortly but as they won’t be required to submit the form shouldn’t affect what I’m asking? Or it does?

… what ‘data field’? How do you know that the person has completed step 3?

For instance:

<table class="tableDetails2">
			<tr>
              <th>Step 6</th>
              <td><?php echo $row_rsHardwareAsset['maint6']; ?> &nbsp;</td>
            </tr>
			</table>

How do I make this table not visible if maint6 contains no data?

That’s a PHP question, because ‘maint6’ doesnt exist at the Javascript execution level.
Basically you’d wrap the entire table tag in

<?php if($row_rsHardwareAsset['maint6'] != "") { ?>
...the above HTML
<?php } ?>
1 Like

Works fine, thank you very much.

Now, the original question - I need a button which could be pressed only when visible “DONE” buttons has been clicked.

When I say visible “DONE” - this refers to recent post by @m_hutley. Only steps with filled instructions will be visible.

I assume there should be command which would check if buttons in the page set “active” as I use this feature to change button color when it’s clicked.

ahhh okay, i’m getting what you mean now.
So there’s a few ways to go about it.
Simplest Way: Count the button clicks.
I don’t see you loading jQuery, so i’ll stick to vanilla JS for the moment.
First, we find out how many buttons have been loaded, and set up a couple of variables to use later.

<script>
   var buttons = document.querySelectorAll('.donebutton');
   var totalbuttons = buttons.length;
   var buttonsclicked = 0;

Now we need to listen for the buttons to be clicked…

   Array.from(buttons).forEach(button => {
         button.addEventListener('click', function (e) {
             buttonsclicked += 1;
             this.disabled = true;
             //Simplistic storage for current state.
             window.localStorage.setItem('buttonspressed',buttonsclicked);    
             if(buttonsclicked >= totalbuttons) {
                   //We're finished here. Show the submit button.
                  document.getElementById('thesubmitbutton').style.visibility = "visible";
                  document.getElementById('commentbox').style.visibility = "visible";                  
             }
         }
   }

EDIT: I’d recommend adding a class to your done buttons so that the script doesnt get confused about other buttons on your page. I’ve called the class ‘donebutton’ above, but use whatever.

1 Like

When you say “class”, do you refer to CSS style? Because on click I switch between button and button.pressed

Here’s my script for this function:

	<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>

EDIT: If I got it right, your code would hide the button? Ideally I am after “faded” (or 50% transparent) mode.

oh so you ARE using jquery. ok then. Makes it a bit cleaner…

I would still add another class to your donebuttons, pressed or not, because you’re going to add another button (the final ‘submit’ button), and you don’t want the script to get confused.

                $('Button').click(function() {
                    $(this).toggleClass('pressed');
                });

=>

                $('.donebutton').click(function() {
                    $(this).toggleClass('pressed');
                    if ($('.pressed').length === $('.donebutton').length) {
                        $("#finaltable").show();
                    }
                });
1 Like

I’m bit confused do I used both quoted codes or just the bottom one?

The => indicates “this transforms into…”. You should replace the code in the top box with the one in the bottom.

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;">&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 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 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 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 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 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 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 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 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 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 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'); ?>

so 'button' refers to the tag -
<button>
".donebutton" refers to anything with the class donebutton -

<button class='donebutton'></button>
<div class='donebutton'>

(“.donebutton” would match both of these elements)
adding a class to an element doesnt change the element’s tag, nor remove any other class applied to it -

<button class='donebutton pressed'></button>

This is a button tag, with 2 classes: donebutton and pressed. CSS for all three would be applied.

Appreciate your explanation, but does it means my code is correct?

EDIT:
I have now created different class to avoid mixing up names.

My css now:

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;
}	
	
Donebutton.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;
}	

But the script code doesn’t seem to work?

Class names are case sensitive. “.Donebutton” != “.donebutton”

As far as your CSS goes… you dont have to re-define things that dont change when you add a second class.

IE:

button {
  background-color: red;
}

.pretty {
  font-family: Arial;
}

.ul {
  text-decoration: underline;
}

If I say <button class='pretty ul'>, i get a button with a red background, Arial font, and underlined text.

So we can condense your CSS:

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;
}	
	
.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;
}

Ok so I have used this code you quoted but I now can submit form without pressing “DONE” button(s). Is the script correct?

The button to submit the form shouldnt be visible until all the buttons have been clicked…