Disable Form on Submit

by Fahd Shariff

HTML

<form action="http://www.google.com" method="post" 
  onsubmit="mybutton.disabled=true;mybutton.innerHTML='PROCESSING...';myprogress.style.display='block';return true;">
  <button name="mybutton" type="submit">SUBMIT</button>
  <progress id="myprogress" style="display:none"></progress>
</form>

CSS

button {
  background: #eb7035;
  border-color: #45b7a5;
  border-radius: 5px;
  border-style: none;
  padding: 12px;
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  margin:5px;
}

button:hover {
  background: #d3642f;
}

button:disabled {
  background: #6c757d;
  cursor: default
}