Question

I have a form that uses a model to populate some of the fields.

I have a list of checkboxes, and I want a reset button that resets all the checkboxes to what they were when the page loaded. How can I refresh that form with the current model, effectively erasing any changes made?

For example, there are three checkboxes, box 1 is checked and 2 and 3 are not. A user checks 2 and 3 but can’t remember what he changed and doesn’t want to change anything bad, so he wants to hit a reset button that will restore the checkmarks to default while still remaining on the form.

I’m sure some ajax will be involved but I can’t see how to reload the page using the current model.

Is this even possible?

Answer 1

You can store the original values in a data attribute. See example. This way you don’t have to go back to the server (and show a loading indicator, handle the error case, etc), because you have a copy of the original values before they changed.

HTML

<input type="checkbox" checked data-was-checked="checked">Option 1</input>
<input type="checkbox">Option 2</input>
<input type="checkbox" checked data-was-checked="checked">Option 3</input>
<input type="checkbox">Option 4</input>
<button id="reset">Reset</button>

JAVASCRIPT

$("#reset").click(function () {
    $("[type=checkbox]").each(function (index, cb) {
        cb.checked = !!cb.getAttribute("data-was-checked");
    });
});