0

In Html5 how do I renable an input field when the user submits the form.I have a text field that user can only modify using some associted button so I set it to disabled so they cannot modify it manually. But because it is disabled when user submits the form my server does not receive the value of the field in request. So how do I make it enabled just as submit button pressed, or is there another approach I should take.

Paul Taylor
  • 13,411
  • 42
  • 184
  • 351
  • One way is to take the value and put it into a type="hidden" input in the submit event. – Alex K. Jan 17 '18 at 16:20
  • A field being disabled doesn't stop it from being submitted. Where's your code? – Sterling Archer Jan 17 '18 at 16:20
  • `form.submit = function () { field.disabled = false; }`? – Heretic Monkey Jan 17 '18 at 16:21
  • @SterlingArcher Well, [according to HTML 4, disabled fields should not be submitted with the form](https://stackoverflow.com/a/1355734/215552), and indeed HTML5 has kept up the tradition, using the phrase "The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted." everywhere the disabled attribute is mentioned. – Heretic Monkey Jan 17 '18 at 16:30
  • @MikeMcCaughan no kidding? Well, I stand corrected then, thank you for the knowledge! – Sterling Archer Jan 17 '18 at 16:35
  • seems the solution is to use readonly – Paul Taylor Jan 17 '18 at 17:05

1 Answers1

2

disabled elements do not send its value when form submitted, you should use readonly instead.

According to w3c's definition:

Disabled:

  • When set for a form control, this boolean attribute disables the control for user input.
  • Disabled controls do not receive focus.
  • Disabled controls are skipped in tabbing navigation.
  • Disabled controls cannot be successful.

Readonly:

  • When set for a form control, this boolean attribute prohibits changes to the control.
  • Read-only elements receive focus but cannot be modified by the user.
  • Read-only elements are included in tabbing navigation.
  • Read-only elements may be successful.

EDIT: You can apply CSS rules for visual indication.

[readonly] {
  cursor: not-allowed;
  border: 1px solid #ccc;
  background-color: #eee;
  color: #555;  
}
<label>Not "Disabled"</label>
<br>
<input type="text">
<br>
<br>
<label>"Disabled" (Actually readonly)</label>
<br>
<input type="text" readonly>
<br>
<br>
<label>You can still select (therefore copy) readonly values</label>
<br>
<textarea rows="4" cols="50" readonly>Hello :)</textarea>
Community
  • 1
  • 1
Daniel Memije
  • 120
  • 1
  • 8