5 Ways To Disable HTML Forms (Simple Examples)

Welcome to a tutorial on how to disable HTML forms in Javascript. So you want to disable a form on submission, or maybe a part of it when certain options are selected?

That covers the quick basics, but let us walk through detailed examples. Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

1) DISABLE FIELDSET

<!-- (A) DEMO FORM -->
<form onsubmit="return demoA()">
<fieldset id="demoAA">
  <input type="text">
  <input type="submit" value="Go!">
</fieldset>
</form>
 
<!-- (B) DISABLE FIELDSET ON SUBMIT -->
<script>
function demoA () {
  document.getElementById("demoAA").disabled = true;
  return false;
}
</script>

As in the introduction above, we cannot disable the entire <form> for some reason… Thus the roundabout way to wrap another layer of <fieldset>, which we can apply disable on.

 

2) DISABLE SUBMIT

<!-- (A) DEMO FORM -->
<form onsubmit="return demoB()">
  <input type="text">
  <input type="submit" id="demoBB" value="Go!">
</form>

<!-- (B) DISABLE SUBMIT ON SUBMIT -->
<script>
function demoB () {
  document.getElementById("demoBB").disabled = true;
  return false;
}
</script>

Alternatively, we can disable the submit button to prevent multiple submissions. Just in case you are thinking “this is stupid” – It’s not. This works especially well for things like “editing a document online”, and “save the progress in the background while I keep on editing”.

 

 

3) PARTIAL DISABLE

3A) DISABLE SECTION

<!-- (A) DEMO FORM -->
<form onsubmit="return false">
  <!-- (A1) CHECKBOX -->
  <label>
    <input type="checkbox" id="demoCA" onchange="demoC()">
    Disable section below.
  </label>

  <!-- (A2) FIELDSET SECTION -->
  <fieldset id="demoCB">
    <input type="email">
    <input type="text">
  </fieldset>
 
  <!-- (A3) SUBMIT -->
  <input type="submit" value="Go!">
</form>
 
<!-- (B) TOGGLE DISABLE SECTION -->
<script>
function demoC () {
  const checkbox = document.getElementById("demoCA"),
        fieldset = document.getElementById("demoCB");
  fieldset.disabled = checkbox.checked;
}
</script>

Remember <fieldset> from above? The original intention of that HTML tag is to create sections within the form; We can disable certain sections of the form, based on certain selections.

 

3B) DISABLE SPECIFIC FIELDS

<!-- (A) DEMO FORM -->
<form onsubmit="return false">
  <!-- (A1) TOGGLE BUTTON -->
  <label>
    <input type="checkbox" id="demoDA" onchange="demoD()">
    Disable email and text fields below.
  </label>
 
  <!-- (A2) FORM FIELDS -->
  <input type="email" id="demoDB">
  <input type="text" id="demoDC">
  <input type="color">
  <input type="submit" value="Go!">
</form>
 
<!-- (B) TOGGLE FIELDS -->
<script>
function demoD () {
  const checkbox = document.getElementById("demoDA"),
        toggle = document.querySelectorAll("#demoDB, #demoDC");
  for (let field of toggle) { field.disabled = checkbox.checked; }
}
</script>

If you want to disable particular fields, the only way is to use querySelectorAll() to get and disable them.

 

 

4) FULLSCREEN OVERLAY

<!-- (A) FULL PAGE OVERLAY -->
<style>
#demoEA {
  display: none;
  width: 100vw; height: 100vh; z-index: 999;
  position: fixed; top: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>
<div id="demoEA"></div>
 
<!-- (B) DEMO FORM -->
<form onsubmit="return demoE()">
  <input type="text">
  <input type="submit" value="Go!">
</form>
 
<!-- (C) DISABLE PAGE ON SUBMIT -->
<script>
function demoE () {
  document.getElementById("demoEA").style.display = "block";
  return false;
}
</script>

1. <div id="demoEA"> is set to cover the entire screen. Of course, it is hidden with display: none by default.
2. The usual HTML form.
3. On form submit, we set <div id="demoEA"> to  display: block. This effectively prevents the user from messing with the page.

 

 

5) HIDE OR REMOVE FORM

<!-- (A) DEMO FORM -->
<form id="demoFA" onsubmit="return demoF()">
  <input type="email">
  <input type="submit" value="Go!">
</form>
 
<!-- (B) HIDE FORM ON SUBMIT -->
<script>
function demoF () {
  document.getElementById("demoFA").style.display = "none";
  // document.getElementById("demoFA").remove();
  return false;
}
</script>

Finally, hide or remove the form on submit. Maybe good for a simple “yes/no” option form. Just click and it’s gone.

 

 

LINKS & REFERENCES

• Fieldset – MDN
• Ways to get HTML elements – Get By ID | Get By CSS Class | Query Selector All
• Non-Editable Text Fields In HTML – Code Boxx
• Disable HTML Elements – Code Boxx