Why aren't checkboxes/radiobuttons and options resetable if they were set by PHP?

Question

Working with XHTML 1.1

I have this login page managed in php. It contains several checkboxes, radiobuttons and a dropdownlist.

There's a lot of formchecking behind it and if something doesn't check out, the page reloads and all values are filled back into their place, except for passwords.

This means the <select>, <input type="radio" and <input type="checkbox" elements that have been selected are re-selected.

Yet when I look at the source code, the checked="checked" and selected="selected" pieces are missing. But seeing as how the reloaded page has them selected, they must have been implemented.

Yet when I click my <input type="reset" button, nothing happens. The don't get de-selected.

Fun thing is, when I select some other checkboxes, radiobuttons and change the select, the reset does work, but only on the newly clicked checkboxes and radiobuttons.

Even more weird is the fact that when I click reset, the radiobuttons, checkboxes and selects don't clear themselves, they jump back to the one that was checked or selected when PHP forced the page to reload.

What's going on here?

Using firefox by the way, checking IE now.

EDIT: IE same problem.

Answer 1

(Which browser?)

Regardless, this behavior (of not resetting all the controls) is by design, otherwise browsing and filling forms in the web would be a horrible experience (where most forms were reset by a single mistake).

There's also refresh (like F5) and "real" refresh (Ctrl-F5) which will always reset the page completely.

Answer 2

If your code after the PHP reload is missing the checked="checked" and selected="selected" attributes, then really the only explanation for them appearing selected is that your browser remembered their values and restored them. That would probably also explain the rest of the behavior. I would suggest making sure the PHP code generates the checked/selected attributes correctly and the rest should take care of itself.

Answer 3

If you're using "View Source" and the script is setting aggressive no-cache headers, it's possible that you're not seeing the source code of what's being displayed. Try it in something that shows the live DOM, like Firebug or the DOM Inspector.

Answer 4

I'm not sure the cause of all your problems but I'll give you a quick break down on how javascripts default form reset method works.

Say you have the following form:

<form id="myForm>
    <input type="text" name="textField1" value="" />
    <input type="text" name="textField2" value="test1" />
    <input type="text" name="textField3" value="test2" />

    <input type="checkbox" name="checkbox1" value="box1" />
    <input type="checkbox" name="checkbox2" value="box2" checked />
</form>

And in textField1 you put Foo And in textField2 you put Bar And in textField2 you put Baz

And then you check off both check boxes. Then reset the form

myForm.reset();

The form fields will now have the following:

textField1="" textField2="test1" textField3="test2"

checkbox1=NOT checked checkbox2=checked

Whats happens is the reset method doesn't "clear" the form it sets it back to what all of the default values for the form were.

Hope this helps out a bit.