JQuery清除表单关闭

Posted 2023-05-09

【中文标题】JQuery清除表单关闭

【英文标题】：JQuery Clear Form on close

【发布时间】：2010-12-24 01:24:10

【问题描述】：

我有下面的 JQuery 对话框脚本，我试图找出当我关闭对话框时如何触发一个清除表单的函数。

function clearForm()

$(':input','#calcQuery')
.not(':button, :submit, :reset, :hidden')
.val('');
;
// form popup 
$(document).ready(function() 

//var dataString = $("#calcQuery").serialize();
    $("#formBox").dialog(
      bgiframe: true,
        autoOpen: false, 
        height: 600,
        width: 400, 
        modal: false,
        closeOnEscape: true,
        title: "Calculator",
        buttons:    
            "Calculate": function() 

// form post
            $.ajax(
            type: "POST",
            url: "calc.php",
            data: $("#calcQuery").serialize(),
            dataType: "html",
            success: function(response)
                
                $("#calcBox").html(response);
                $("#calcBox").show();   
                ,
            error: function
                (xhr, ajaxOptions, thrownError)
                    
                    alert(xhr.status); 
                    alert(thrownError);
                    



    ).responseText;

// form post 

                
             
    );

$('#calcButton').click(function()
    $('#formBox').dialog('open');
    return false;
    );

);

$("#formBox").bind('dialogclose', function(event)

clearForm();
); 

【问题讨论】：

form.reset() 可能会成功...

【参考方案1】：

这将重置表单：

$("#form").trigger( "reset" );

【讨论】：

你能澄清一下这条线应该去哪里吗？谢谢。

@FrancisRodgers 看看我的回答

【参考方案2】：

使用close event

$("#formBox").dialog(
      bgiframe: true,
        autoOpen: false, 
        height: 600,
        width: 400, 
        modal: false,
        close: clearForm
);

【参考方案3】：

我通过使用 ... 来让它工作

function clearForm(form)

    $(":input", form).each(function()
    
    var type = this.type;
    var tag = this.tagName.toLowerCase();
        if (type == 'text')
        
        this.value = "";
        
    );
;

还有.....

// form post
            $.ajax(
            type: "POST",
            url: "calc.php",
            data: $("#calcQuery").serialize(),
            dataType: "html",
            success: function(response)
                
                $("#calcBox").html(response);
                $("#calcBox").show();   
                clearForm("#calcQuery");
                ,
            error: function
                (xhr, ajaxOptions, thrownError)
                    
                    alert(xhr.status); 
                    alert(thrownError);
                    



    ).responseText;

// form post

...现在..如何将单选按钮设置回默认的“GB”？

&nbsp;KB <input type="radio" name="curr_unit" value="KB" />
&nbsp;MB <input type="radio" name="curr_unit" value="MB" />
&nbsp;GB <input type="radio" name="curr_unit" value="GB" checked/>
&nbsp;TB <input type="radio" name="curr_unit" value="TB" />

谢谢

【参考方案4】：

更优雅的是你的方法的组合：

...
beforeClose: function() 
    $("#form").trigger("reset");
,
...

它会在保存、取消和标题栏关闭按钮时重置您的表单。 必须手动完成的 select2 例外：

$("#mySelect2").select2('data', null);

里面同beforeClose

【参考方案5】：

`jQuery("#form").trigger( "reset" );`

在成功消息显示后将其放入成功函数中。 然后它就完美运行了！ 示例：

success : function()
jQuery('#contactsMsgs').html('<p class="success">All is well, your e&ndash;mail has been sent.</p>');
jQuery('#yourformname').trigger( 'reset' );
spinner.hide();`