Rohit Sharma Rohit Sharma - 22 days ago 6
HTML Question

Use of Disabled fields in HTML

I came across a text that data inside disabled fields is not submitted along with the form. So i don't see why we even need to use disabled fields while writing code. Please explain the scenario in which it becomes inevitable to use disabled field.

Answer

A field that is disabled in an HTML form is unusable, unclickable and will not submit data.

The point about such a field is that something else has to happen before that field is no longer disabled - and then it becomes a normal HTML form field.

eg.

var otherReasonRadio = document.querySelector('input[value="reason-other"]');
var otherReasonInput = document.querySelector('input[name="other-reason"]');

function enableOtherReasonInput() {
otherReasonInput.removeAttribute('disabled');
}

otherReasonRadio.addEventListener('change',enableOtherReasonInput,false);
label {
display: block;
}
<form>
<label><input type="radio" name="reason" value="reason-a" />Reason A</label>
<label><input type="radio" name="reason" value="reason-b" />Reason B</label>
<label><input type="radio" name="reason" value="reason-other" />Other Reason</label>

<p><label>Please State Other Reason: <input type="text" name="other-reason" disabled></label></p>
</form>