Form submitting with PHP and JQuery/Ajax

[n4te02]

I have searched everywhere, but cannot find a solution for this... I have worked all day trying to get my form to work with jquery. It works to a point.

So, I have my Form open up in a Jquery Modal Window...works fine.
A user has his username in the Name field, they need to select a Category, if they don't it returns an error. Lastly, they must fill out a Message, if they do not have a certain # of characters, it returns an error as well. This all works fine. The errors show up appropriately with the Jquery that I have set. The only problem I am having right now is that no matter how many chars I insert into the Message textarea, it returns the "Your message length is too short" error. The string length must be at least 10 characters. Once all is set I want it to show the Success message, then after a couple of seconds close out the jquery window and display the post without having to refresh.

Here is the form code (db_connect(); is a function to connect to the database):

<form class="guestbook_form" action="add_post.php" method="post">
<label>Nickname:</label>
<?php
db_connect();
if(!$_SESSION['user']['username'])
	{
	$username = "Anonymous";
	echo '<input type="text" readonly="readonly" name="guestbook_name" class="guestbook_name" value="'.$username.'" />';
	}
else
	{
	$username = $_SESSION['user']['username'];
	echo '<select name="guestbook_name" class="guestbook_name" id="guestbook_name">
				<option value="'. $username .'">'. $username .'</option>
				<option value="Anonymous">Anonymous</option>
			</select>';
	}

$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="guestbook_submit">Submit</button>
<button type="submit" class="close">Cancel</button>
</p>
</form>

the add_post.php:

PHP Code:

<?php
require_once('functions.php');
db_connect();

$message = $_POST['guestbook_message'];
$name = $_POST['guestbook_name'];
$datetime = $_POST['datetime'];
$category = $_POST['category'];

if (strlen($message) < 10)
    {
    $msgerror = "<strong>Error:</strong> Your message length is too short.";
    }
if ($category == 1)
    {
    $msgerror = "<strong>Error:</strong> Please choose a category.";
    }

$bad_word_list = "<object, </object>, <script, <param, </script>, </param>, <a href, ja&#118, &#0000106&#0000097&#0000118&, &#x6A&#x61&#x76&#x61&#x73, &#x09;, &#x0A;, &#x0D;, alert\(, <iframe, <embed, <meta, http://, www., .com, .net, .org, dot com, dot net, dot org";
$bad_words = explode(", ",$bad_word_list);
foreach ($bad_words as $word)
    {
    if (false !== stripos($message, $word))
        {
        $msgerror = "<strong>Error:</strong> Your message might contain unauthorized words.";
        }
    }
    
if($msgerror)
    {
    $postmsg = $msgerror;
    echo "<span class='posterror'>". $postmsg ."</span>";
    }
else
    {
    add_post($message, $name, $datetime, $category);
    $postmsg = "<strong>Success!</strong> Your Muttr has been posted.";
    echo "<span class='postsuccess'>". $postmsg ."</span>";
    }
?>

and finally, the jquery/ajax:

$("#guestbook_submit").click(function(){
	//get the id
	//the_id = $(this).attr('id');
	$(".postmsg").fadeOut(50);

	// show the spinner
	$('.postmsg').append('<img src="images/loader.gif" alt="Loading" />');
	
	//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",
		timeout: 2000,
		cache: false,
		success: function(msg)
		{
			$("#loading").remove();
			$(".postmsg").fadeIn(400);
			$(".postmsg").html(msg);
			setTimeout("$('.postmsg').fadeOut();",60000);
		}
	});
return false;
});

[Lamped]

2 things:

1. Disable caching in your add_post.php like so:

PHP Code:

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past 


2. If that doesn't work, put alert(message) after your var message = $("#guestbook_message").val(); line

[Phil Jackson]

PHP Code:

$message = $_POST['guestbook_message']; 


should be

PHP Code:

$message = $_POST['message']; 


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

PHP Code:

$_POST['name'];
$_POST['category'];
$_POST['message']; 


[n4te02]

I found it out... I had to "serialize()" the form in order to pass it through PHP.