How to reset the values of a textbox in a dialog after destruction?
I have a dialog that has 2 text boxes. I want to reset the textbox values after the dialog is destroyed. How can i do this?
If I entered values in the text boxes and clicked the Cancel button, reopening the dialog will display the data I entered earlier.
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>
a source to share
At first, the type textbox
does not exist. Use text
or password
(for hidden characters) instead .
Use this code to clean up inputs:
"Accept": function() {
$("#text1").val('');
$("#text2").val('');
}
Finally, I rewrote 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 a button "Cancel"
, but it will not change yout fields input
as they are declared independently from the dialog. That is why you must manually clear them.
a source to share
Clear all data on the dialog before closing it. Here is the code:
function setDialogWindows($element) {
$('#change').dialog({
autoOpen: true,
beforeClose: function (event, ui) { $(this).empty(); },
width: 380,
buttons: {
"Cancel": function() {
$(this).dialog('destroy');
},
"Accept": function() {
}
}):
}
a source to share
try
"Cancel": function() {
$(':text',this).val('');
$(this).dialog('destroy');
}
and also note that you missed 1 }
on buttons :{}
and <input type="textbox" id="text1" />
should be <input type="text" id="text2" />
. note the type ...
change
when you want the textboxes to reset on reopening, no 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() {
}
}
});
a source to share