HTML - Disabled Attribute

About

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

_

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

Powered by ComboStrap