Search code examples
jqueryformsjquery-uijquery-ui-dialog

JQuery Clear Form on close


I have the below JQuery Dialog script, I'm trying to find out how to fire off a function that clears the form when I close the dialog.

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

Solution

  • I got it to work by using ...

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

    and .....

    // 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
    

    ... now .. how do I set the radio buttons back to the default of "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" />
    

    thanks