Form submissing with PHP and JQuery/Ajax

Posted on 16th Feb 2014 by admin

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):
Code: [Select]<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:
Code: [Select]<?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, &#38;#106;&#38;#97;&#38;#118, &#38;#0000106&#38;#0000097&#38;#0000118&, &#38;#x6A&#38;#x61&#38;#x76&#38;#x61&#38;#x73, &#38;#x09;, &#38;#x0A;, &#38;#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:
Code: [Select]$("#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;
});