That bug is my fault #1 - IE disabled parent not serialized
I'm writing about bugs I've caused in the hope it'll stop me repeating them and maybe help someone else making the same mistakes I've made.
[disabled] attribute on a
<div> element* resulted in the child
<input /> value not being serialised on form submission (affecting IE/Edge only).
[disabled] attribute was used to apply specific styles to a 'pre-populated' form - displaying an 'edit' link and a green tick icon using the
The HTML markup:
(excluding the C# used to add the property and populate the input)
<div disabled> <label for="fName">First name</label> <input type="text" id="fName" name="fName" value="Nick"> <span class="edit-input">Edit</span> </div>
The prepopulated style:
Inputs with the disabled attribute will not be serialised when using jQuery's
.serialise() function, IE/Edge handle inputs with a disabled parent as disabled themselves so the child input was not serialised.
Chrome and Firefox don't handle disabled parents in the same way and they will serialise the input.
I removed the attribute and used a disabled class:
<div class="disabled"> instead.
This is a much better way of doing things and thinking back I'm not sure why I used a disabled attribute over a class. Its not valid HTML and there was no reason to not use a class - other than complicating the CSS/JS.
You can see the bug in the pen below (use IE).