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?
- We cannot disable an entire form directly –
<form disabled>
- But we can wrap all the fields in a fieldset and disable it –
<fieldset disabled>
- Alternatively, just disable the submit button –
<input type="submit" disabled>
That covers the quick basics, but let us walk through detailed examples. Read on!
TABLE OF CONTENTS
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
EXAMPLE CODE DOWNLOAD
Click here to download. 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
WAYS TO DISABLE HTML FORMS
All right, let us now get into the possible ways and examples of disabling HTML forms.
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>
<div id="demoEA">
is set to cover the entire screen. Of course, it is hidden withdisplay: none
by default.- The usual HTML form.
- On form submit, we set
<div id="demoEA">
todisplay: 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.
EXTRAS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
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
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!