Usage and demo of the HTML disabled attribute for control forms

About

disabled is an attribute that can be set on a control element.

Html Disabled Illustration

In this case, the key/value data of the control is not included in the data when a form is submitted.

If you want the value of your control to be seen and added to the form data but not mutable, you can add the readonly attribute.

In other words, setting disabled, makes any control not successful.

Demo

This demo will show you what is send when a control is disabled/enabled.

  • The HTML with:
    • an input element disabled at first
    • a button that capture the data submitted and toggle the input element to enable (disabled) at the same time
<form>
  <input type="text" name="elementname" value="valueToSend" disabled>
  <button type="submit" name="btn" >Send and toggle disabled</button>
</form>
  • The javascript that:
    • prevent the default form action.
    • gather and shows the form data with the formdata object
    • toggle the disabled state (in order to test the two state)
document.querySelector("form").addEventListener("submit", function(event){
    event.preventDefault();
   let formData = new FormData(this);
   let entries = [];
   for (let entry of formData) {
       entries.push(entry[0]+":"+entry[1]);
   }
   if (entries.length>0){
     console.log(`Data Send (${entries[0]})`);
   } else {
     console.log("No data Send");
   }
   if (this.elementname.disabled){
      this.elementname.disabled=false;
      console.log("The input has been enabled");
   } else {
      this.elementname.disabled=true;
      console.log("The input has been disabled");
   }
});
  • Result:
    • Click one time to see what is send when the input is disabled
    • Click one more time to see what is send when the input is enabled





Discover More
What are Form Control elements in HTML ?

control form elements are elements that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit it or reset it field set [optional]...



Share this page:
Follow us:
Task Runner