litebox form posting issue

[fife]

Hi.  I have a form on my page that looks like follows......

 

<div id="login-box">

<a href="javascript:void(0);" class="floatRight" id="closeLink">Close Form</a> <div class="clear"></div><h5 class="floatLeft">New Comment </h5>
		<div class="clear"></div>
            	
            <hr>
<div id="preview"></div>
<form action="submitpost.php" method="post" name="newCommentfrm" id="newCommentfrm">
        <ul>
            <li><label>Comment Type:</label><div class="clear"></div><select name="type">
              <option>Please Select</option>
              <option value="Sightseeing">Sightseeing</option>
              <option value="Nightlife">Nightlife</option>
              <option value="Highlights">Highlights</option>
              <option value="Tips">Tips</option>
              <option value="Events">Events</option>
              <option value="News">News</option>
              <option value="Contrasts">Contrasts</option>
              <option value="Lifestyle">Lifestyle</option>
              <option value="Food">Food</option>
            </select></li>
            
           <li><label>Title:</label><div class="clear"></div><input name="ComTitle" type="text" size="40"></li>
          
           <li><label>Comment:</label><textarea name="commentDescrip" cols="45" rows="10"></textarea></li>
                    <li><input name="member" type="hidden" value="<?php $row_rs_User['userID'];?>"><input name="submit" type="submit" value="Post Comment"></li>
                    </ul>
                </form>
  
	</div>

 

the form submits to submitpost.php and then refreshes the page with a thankyou message which works great.

 

However the form needs to be a lightbox form which submits without freshing the page. so I then added the lightbox features

 

<script type="text/javascript" src="/js/prototype.js"></script>
	<script type="text/javascript" src="/js/scriptaculous.js?load=effects,dragdrop"></script>
	<script type="text/javascript" src="/js/lightbox.js"></script>
	<script>
		var test;

		Event.observe(window, 'load', function () {
			test = new Lightbox('login-box');
		});

		Event.observe('lightboxLink', 'click', function () {
			test.open();
		});

		Event.observe('closeLink', 'click', function () {
			test.close();
		});
	</script>

 

and the submit without refresh

 

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#newCommentfrm").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('submitpost.php', $("#newCommentfrm").serialize(), function(data) {
				$('#preview').html(data);
			});
		}
	});
});
</script>

 

Now the form submits but actually takes you to the submit.php page and just sits there with the thankyou message without displaying the thankyou in the orginal lightbox div.  I hope that makes sense!  Here is the code for the submit

 

 

<?php
include('database.php');
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$type=mysql_real_escape_string($_POST['type']);
$title=mysql_real_escape_string($_POST['ComTitle']);
$message=mysql_real_escape_string($_POST['commentDescrip']);
$member=mysql_real_escape_string($_POST['member']);
if(strlen($type)>0 && strlen($title)>0 && strlen($message)>0)
{
$time=time();
mysql_query("INSERT  INTO table (type, title, message,postUserID, time) VALUES('$type','$title','$message','$member', '$time')") or die('post error');
echo "<h2>Thank You !</h2>";
}
}
?>

 

I have found that if I remove the lightbox form then the submit without refresh works perfectly but the client has requested the lightbox feature.  Can someone please point out my errors.  Thank you