Jquery Ajax form submit problem

[ncovill]

When you click the link to open the form it opens a jquery modal window which displays the form. the code for the form is:

<form class="guestbook_form" action="#" method="post">
<label>Nickname:</label>
<?php
db_connect();
<input type="text" readonly="readonly" name="guestbook_name" class="guestbook_name" value="username" />

$query = "SELECT * FROM `categories`";
$results = mysql_query($query);
echo '<select name="category" class="category" id="guestbook_category">';
while ($row = mysql_fetch_array($results))
{
$catid = $row['cat_id'];
$catname = $row['category'];
echo '<option value="'.$catid.'">'.$catname.'</option>';
}
echo "</select>";
?>

<p class="label">
<label>Message:</label><textarea cols="50" rows="10" name="guestbook_message" id="guestbook_message"></textarea>
</p>
<p class="label">
<label></label>
<span class="postmsg">
</span>
</p>
<p class="submit">
<button type="submit" class="submit" value="Submit" id="guestbook_submit" name="submit">Submit</button>
<button type="submit" class="close">Cancel</button>
</p>
</form>

 

When they click "Submit", add_post.php checks to see if there are any errors or not. I want it to do just that, display the proper message whether its a success or an error right above the submit/cancel buttons. It is displaying errors perfectly, but only once...if you press Submit, get an error, then press it again, it seems to close the screen and then reloads the page. I need it to rinse, wash, and repeat if they click submit a second time and there's another error or what not.

 

Just so you know, the first part of this code is the window popup... but here is the jquery pop up and the jquery/ajax code:

$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
	//Cancel the link behavior
	e.preventDefault();

	//Get the A tag
	var id = $(this).attr('href');

	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	//Set heigth and width to mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});

	//transition effect		
	$('#mask').fadeIn(100).fadeTo("fast", .6);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
              
	//Set the popup window to center
	$(id).css('top',  winH/2-$(id).height()/2);
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).fadeIn(500); 
});

//if submit post is clicked
$("#guestbook_submit").click(function(e){

	// show the spinner
	$(this).parent().html("<img src='images/ajax-loader.gif' alt='' id='loading' /><button type='submit' class='submit' value='Submit' id='guestbook_submit' name='submit'>Submit</button> <button type='submit' class='close'>Cancel</button>");

	//the main ajax request
	var name = $("#guestbook_name").val();
	var category = $("#guestbook_category").val();
	var message = $("#guestbook_message").val();

	var dataString = 'name='+ name + '&category=' + category + '&message=' + message;

	$.ajax({
		type: "POST",
		data: dataString,
		url: "add_post.php",
		cache: false,
		success: function(msg)
		{
			$("#loading").remove();
			$(".postmsg").fadeIn(300);
			$(".postmsg").html(msg);
		}
	});
return false;
});

//if close button is clicked
$('.window .close').click(function(e) {
	//Cancel the link behavior
	e.preventDefault();

	$('#mask').hide();
	$('.window').hide();
});
});

 

If you need the add_post.php code, please let me know and I will post it right away Any help would be greatly appreciated, as this is a huge issue for me and my site!

[ncovill]

I added in

$('.postmsg').append('<img src="images/loader.gif" alt="Loading" />');

 

instead of the

//$(this).parent().html("<img src='images/ajax-loader.gif' alt='' id='loading' /><button type='submit' class='submit' value='Submit' id='guestbook_submit' name='submit'>Submit</button> <button type='submit' class='close'>Cancel</button>");

 

and that's working fine... now I gotta figure out why it won't submit the form properly.. keeps giving me my "Error: Your message length is too short." message