CODEWITHSUNDEEP
javascript
Sergey
Sergey

Reputation: 57

Why is the input field with the disabled attribute not saving the entered data at the field after submitting tha data and stepping back?

there.

I have the simplest form with the code:

<script>
var field1 = document.querySelector("#field1")
var field2 = document.querySelector("#field2")

field1.addEventListener('focus', function (e) {
    field2.removeAttribute("disabled")
})
</script>
<form action="/" method="POST">
    <input id="field1" name="field1" required="" type="text" value="">
    <input disabled="disabled" id="field2" name="field2" type="text" required="" value="">
    <input id="submit" name="submit" type="submit" value="Save">
</form>

After entering data, sending the form and stepping back, I see no data in the second field. Why?

Before sending data:

before

After sending data and stepping back in a browser history with a mouse back button:

after

Upvotes: 0

Views: 527

Answers (1)

DeepakChauhan
DeepakChauhan

Reputation: 61

When sending data by clicking on the Save button, the values in both the input are being sent. But, when you step back you are effectively reloading the page. On reloading, two things are happening:

  1. The page DOM is reset to its initial state i.e. to the markup in your HTML. Since, in your initial HTML markup, field2 is set as disabled, on page reset the same thing happens.
  2. The browser is autocompleting the previous values that were filled in the inputs. This is a feature of the browser itself and if it were not there, then even in the first field there would've been no data on stepping back. You could verify this by adding autocomplete="off" to the first input field.

Therefore, as your browser implements autocomplete on page reload (due to stepping back), the first input field is filled but the second input field is not because it is reset to its disabled state.

Upvotes: 1

Related Questions