Jquery dialog box error - php

Question

I am using a dialog box to display and submit a enquiry form on my page.I am having problem when I try to call it again and again.The first time everything works fine and the form s submitted successfully.But if I click the GO button(added html below).I get an error for this line document.
EDITED:
<div class="hidden" id="dialog">
<form action="index.php" class="testForm" id="testForm">
<div class="name" id="name">
<div class="displayName" id="dispName">Name</div>
<div class="textName" id="viewName"><input type="text" class="fname" id="fullName" /></div>
<div class="hide" id="nameErr"></div>
</div>
<div class="address" id="addressDetails">
<div class="displayAddress" id="dispAddress">Address</div>
<div class="textAddress" id=""><input type="text" class="taddress" id="fullAddress" /></div>
<div class="hide" id="addressErr"></div>
</div>
<div class="submitForm" ><input type="button" class="submitDetails" id="submitInfo" name="Submit" value="Submit" onClick="validateAndSubmitForm()"/>
<a name="Close" onclick="$('#dialog').dialog('close');">Close</a>
</div>
</form>
</div>
Javascript\jquery
function submitEnquiryForProperty()
{
document.forms.testForm.reset();
$("#dialog").dialog({
modal:true,
resizable:false,
autoOpen:false,
width:260,
});
openDialog();
}
function openDialog(){
$("#dialog").dialog("open");
}
function closeDialog(){
$("#dialog").dialog("close");
}
Callback function on form submit
$.ajax({
type:'POST',
url:"processForm.php",
data:"name="+name+"&address="+address,
dataType:"html",
success:function(msg){
if(msg=="success"){
$("#dialog", window.parent.document).html("<div class='pad5'><div class='flt' style='padding-left:3px; width:235px;'><div class='thanx_msg'>Thank you for submitting the details. <br /><div class='spacer5'> </div><span class='gre'>Our Sales team shall revert to your query soon.</span></div></div><div class='spacer5'> </div><div style='padding-left:3px;' class='text'><strong>You can also:</strong></div><div style='margin-left:20px; line-height:20px;'>• Apply for a <a href='homeloan.php'>Home Loan</a><br />• Visit <a href='http://www.proptiger.com'>proptiger.com</a> for more properties<br />• See our <a href='http://www.proptiger.com/blog'>Blog</a> for latest updates</div></div><br/><div class='msg' style='color:red;'>Click to close the box</div>");
$(function(){
$('#dialog').click(function() {
closeDialog();
});
});
}
else
{
alert("Operation cannot be completed,please try again");
}
}
But I am facing the same problem.Error at the .reset() line.
Thanks for your time.

Answer 1

Updated answer
If you want to have a reusable dialog, do it like this:
Include the dialog element (almost assuredly a <div>) in your initial HTML. Use a CSS class so that it will not be immediately visible, for example:
HTML:
<div id="dialog" class="hidden">...</div>
CSS:
.hidden { display: none }
Unconditionally call $("#dialog").dialog(options) from Javascript immediately after the page loads. Be sure to set autoOpen: false in the options.
Whenever you want to display the dialog, use $("#dialog").dialog("open").
Whenever you want to hide the dialog, use $("#dialog").dialog("close").
Repeat steps 3 and 4 as much as you like.

Answer 2

.dialog( "destroy" )
Remove the dialog functionality completely. This will return the element back to its pre-init state.
.dialog( "close" )
Close the dialog.