How to retain old values for HTML controls when jQuery UI dialog box is closed ("cancelled")?

Question

I have a JQuery UI modal dialog box in the form of an HTML (well ...) form with select and input (checkbox) controls. The dialog box and the controls work as one would expect, except that the controls retain their new states (e.g. checkbox selected) even if I close the dialog boxes window (or press a button "Cancel").

Is there any mechanism whereby I can make a jQuery UI dialog box retain the old control states when a certain exit button (e.g. "Cancel") is pressed, or do I have do roll my own state management in JavaScript (I hope not).

Here's an example of what currently happens and should not:

1. Enter dialog box.
2. Checkbox is off.
3. Change checkbox from off to on.
4. Close dialog box window.
5. Open it again.
6. Checkbox is on (I want it to be off, because the dialog box was previously "cancelled").

UPDATE Here is a relevant portion of my HTML, including a call to clone().

<script>
$(function() {
    var dialog = $("form.dialog").clone().dialog({
        autoOpen: false,
        height: 300,
        width: 300,
        modal: true,
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $(this).submit();
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });

    $(“#dialog-button”).on("click", function() {
        dialog.dialog("open");
        return false;
    });
});

</script>

<form hidden method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title=“Test”>

        <select name="name">

            </option>
                <option value="value">
                Test
                </option>

Answer 1

What i might do in this case is to clone the form before creating the dialog. Then, create the dialog with the cloned element. This way, the controls should be unconnected.

$('form.myForm').clone().dialog();

Note that they should not have IDs, as that would end up with duplicated IDs in a document.

Answer 2

You can reset the form using the reset() method of native <form> element as shown below:

$(function() {
  var dialog = $("form.dialog").dialog({
    autoOpen: false,
    height: 200,
    width: 300,
    modal: true,
    buttons: [{
      text: "Ok",
      click: function() {
        $(this).submit();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close").get(0).reset(); //reset the form
      }
    }],
    close: function() {
      this.reset(); //reset the form
    }
  });

  $("#dialog-button").on("click", function() {
    $("form.dialog").dialog("open");
    return false;
  });
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title="Test">
  <select name="name">
    <option value="value">Test</option>
    <option value="value">Option</option>
  </select>
  <input type="checkbox" />
</form>
<button id="dialog-button">Open</button>

---

The reset() method belongs to DOM Element. Inside the callback functions this refer to the native DOM element.

dialog() is a jQuery function. So for closing the dialog we create a jquery object by wrapping this inside $() and call $(this).dialog("close");.

Now, the jquery object $(this) doesn't have the reset() method, So we extract the DOM element from it using jQuery get() method and call it's reset() like

 $(this).dialog("close").get(0).reset();

This is equivalent to:

$(this).dialog("close"); 
this.reset();

(In short I did that to reduce the number of lines by chaining)

Inside the close callback, Since we don't have to close the dialogue manually by calling jquery method, We don't need a jquery object - we simply call this.reset() for resetting.

Reference:

• HTMLFormElement.reset()
• get()

Side note: The quotes (“) you're using is invalid in javascript.