JQuery Clear Form on close

Question

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

Answer 1

Use the close event

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

Answer 2

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