Resetting form based on ASP.NET model

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?

Split Your Infinity · Accepted Answer · 2013-01-28 23:31:32Z

2

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");
    });
});

edited Jan 28, 2013 at 23:31

answered Jan 28, 2013 at 23:23

Split Your Infinity

4,2391 gold badge23 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hanna Over a year ago

This code works by itself, but when I implement it the behavior changes. Or rather, what I see changes. For me, it unchecks ALL of the boxes, but when I view the source of the html, the inputs still have the checked="checked" attribute on them... also !!cb.getAttribute("data-was-checked"); returns false for every single box even though some are true.

Split Your Infinity Over a year ago

Can you create a JSFiddle of your HTML and JS? Not sure what is happening on your end. View source will always show you the HTML as it came from the server and not the changes you made using JS.

Hanna Over a year ago

I can't because I'm using ASP.NET MVC3, which, is probably why my problem is happening, but my HTML checks out =/

Split Your Infinity Over a year ago

Can't you just copy the html output and paste it into JSFiddle or just grab the interesting parts (HTML, JS)?

Hanna Over a year ago

I figured out my problem. Your JS returns a string, instead of a boolean, so I just converted it over and that fixed my issue.

Dave Alperovich · Accepted Answer · 2013-01-29 04:42:23Z

1

One method is to render your checkboxes with an Action Partial. An Action Partial is a call to an ActionResult Method which returns a (optional) Model or Viewbag to the Partial View. The Partial View can use the passed logic to decide how to set and render the checkboxes.

<div id='divchkbox'>
    @Html.Action("/Tools/checkboxes/{id}")
</div>

link and event handler

     $(document).ready(function () {

          $('#resetbtn').click(function(){
               $('divchkbox').load("/Tools/checkboxes/{id}");
          }
   });

edited Jan 29, 2013 at 4:42

answered Jan 28, 2013 at 23:26

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

Collectives™ on Stack Overflow

Resetting form based on ASP.NET model

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related