How to reset textbox values in dialog after destroy?

Question

I have a dialog in which there are 2 textboxes. I want to reset the textboxes values once the dialog is destroyed. How can I do that?

If I have entered values in the textboxes and clicked cancel, reopening the dialog will show the data entered previously.

function setDialogWindows($element) {
      $('#change').dialog({    
           autoOpen: true,    
           width: 380,    
           buttons: {   
              "Cancel": function() {    
                   $(this).dialog('destroy');   
              },    
              "Accept": function() {    
              } 
     }): 
 }

---

$('#link').click(function() {    
    setDialogWindows('#change');    
});

---

<div id="change" title="Change password" >
    <input type="hidden" id="User_Name" name="Name"/>    
    <input type="textbox" id="text1" />
    <input type="textbox" id="text2" />
</div>

Answer 1

At first, type textbox does not exist. Use text or password (for masked characters) instead.

Use this code to clean the inputs:

"Accept": function() {    
    $("#text1").val('');
    $("#text2").val('');
}

---

Finally, I've rewritten the code:

HTML:

<a href="javascript:void(0);" id="link">Show me a dialog!</a>
<div id="change" title="Change password">
    <input type="hidden" id="User_Name" name="Name"/>    
    <input type="text" id="text1"/>
    <input type="text" id="text2"/>
</div>

JavaScript:

$('#link').click(function() {    
    setDialogWindows();    
});

function setDialogWindows() {
    $('#change').dialog({
        autoOpen: true,
        width: 380,    
        buttons: {   
            "Cancel": function() {    
                $(this).dialog('close');
            },    
            "Accept": function() {
                /* Place your handler here. */
                $(this).dialog('close');
            }
        },
        close: function() {
                $("#text1").val('');
                $("#text2").val('');
        }
   });
}

You can use $(this).dialog('destroy'); with "Cancel" button, but it will not modify yout input fields as they are declared independently from the dialog. That's why you ought to clean them manually.

Answer 2

try

"Cancel": function() {
    $(':text',this).val('');    
    $(this).dialog('destroy');   
}

and also I notice, you missed 1 } on buttons :{} and <input type="textbox" id="text1" /> should be <input type="text" id="text2" />. notice the type...

edit

when you want to reset text boxes on re-open, don't need to destroy it...

$( "#change" ).dialog({
   open: function(event, ui) {
      $(ui).find(':text').val('');
   },
   autoOpen: true,    
   width: 380,    
   buttons: {   
      "Cancel": function() {    
            $(this).dialog('destroy');   
       },    
       "Accept": function() {    
       } 
   }
});