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.

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