Question

我有一个对话框，其中有2个文本框。我想在对话框被销毁后重置文本框值。我怎么能这样做？

如果我在文本框中输入了值并单击取消，则重新打开对话框将显示之前输入的数据。

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

首先，类型textbox不存在。请改用text或password（对于蒙面人物）。

使用此代码清理输入：

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

最后，我重写了代码：

<强> 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('');
        }
   });
}

您可以将$(this).dialog('destroy');与"Cancel"按钮一起使用，但不会修改input字段，因为它们是独立于对话框声明的。这就是为什么你应该手动清理它们。

Answer 2

关闭之前清除所有对话框的数据。这是代码：

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

Answer 3

试

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

并且我注意到，您错过了}上的buttons :{} <input type="textbox" id="text1" />，而<input type="text" id="text2" />应该是$( "#change" ).dialog({ open: function(event, ui) { $(ui).find(':text').val(''); }, autoOpen: true, width: 380, buttons: { "Cancel": function() { $(this).dialog('destroy'); }, "Accept": function() { } } });。注意类型......

修改

如果要在重新打开时重置文本框，请不要销毁它......

{{1}}

如何在销毁后重置对话框中的文本框值？

3 个答案: