Form submissing with PHP and JQuery/Ajax

ncovill · October 27, 2009

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
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, &#106;&#97;&#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;
});

joel24 · October 27, 2009

you've got a problem with your jquery/ajax.

the data isn't being sent properly...

use the serialize() function to put the form element into a readable state for the php...

you have the give the guestbook form an id.

i.e.

<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>

then change the jquery to the following

$("#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 dataString = $("#guestbook_form").serialize();

   $.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;
});

CyberShot · October 27, 2009

I just tried a simple if statement without the strlen and it works fine

if($message > '10')

could that work?

ncovill · October 27, 2009

@joel24 - sweet! thanks a bunch man!!! it works fine now except, once I submit, it just sits there with the success message lol. anyway to make it close the window and show the new post on success?

Not sure this will help at all, but here is the jquery for the modal window:

//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 close button is clicked
$('.window .close').click(function(e) {
//Cancel the link behavior
e.preventDefault();

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

joel24 · October 27, 2009

do you want it to just show the new post?

or all the posts?

you'll either have to make it refresh the page, or append the new post to the top of the others...

ncovill · October 27, 2009

do you want it to just show the new post?

or all the posts?

you'll either have to make it refresh the page, or append the new post to the top of the others...

Needs to display all of the posts. So I am guessing somehow need to append the new post.. hmm, any tips on this? lol

joel24 · October 27, 2009

there's a bit of scripting involved, have you played around with jquery?

it'd depend on how you have your guestbook layed out.

but

pretty much you write the html and insert it at the top of the div containing the guest book entries...

but pull the values using jquery... then put them in there..

i.e. the jquery would be like

$("#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 dataString = $("#guestbook_form").serialize();

   $.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();",2000);
$("#guestbookEntries").prepend("<b>Entry Number: whatever, etc etc</b><div>rarara</div>");
      }
   });
return false;
});

</div>

check out

http://docs.jquery.com/Manipulation/prepend#content

ncovill · October 27, 2009

alright, i will have to check all that out. I am more familiar with PHP, jquery is alittle new for me so, this should be fun haha. Thanks again for everything

ncovill · October 27, 2009

Also forgot to add that I would need to make the window close after a few seconds of displaying the success message, not sure if there's anyway to do this ;x

ncovill · October 27, 2009

Also forgot to add that I would need to make the window close after a few seconds of displaying the success message, not sure if there's anyway to do this ;x

I am not sure this whole prepend feature will work properly. It needs to bring up the information from the database, just as it does with all of the previous posts. Not sure how to do this with a brand new post without refreshing the page :/ I was using an auto refresh before, so I may just stick with that for now...

But, here's the function for displaying posts:

function create_output($result)
{
$output = "";
$ip = $_SERVER['REMOTE_ADDR'];
$voting_array = mysql_fetch_array(mysql_query("SELECT * FROM `votes_cast` WHERE `ip` = '$ip'"));
$vote_explode = explode(',', $voting_array['entry_id']);

foreach($vote_explode as $vote_ex)
	{
	$vote_ex = explode(":", $vote_ex);
	$compnum = $vote_ex[0];
	$compvote = $vote_ex[1];
	$compvotearray[$compnum] = $compvote;
	}

while($row = mysql_fetch_assoc($result))
	{
	$output .= "<div class='post'>";
	$output .= "<div class='postcontain'>";
	$output .= "<div class='ventcontain'>";
	$user = $row['name'];
	$user_array = mysql_fetch_assoc(mysql_query("SELECT * FROM `users` WHERE `username` = '$user'"));
	if ($user == "Anonymous")
		{
		$output .= "<a href='profile.php?user=". $user ."' title=''><img src='images/avatars/avatar_default.jpg' alt='' width='38' height='39' class='avatarimg' style='border: 1px #fcb540 solid;' /></a>";
		}
	else
		{
		$output .= "<a href='profile.php?user=". $user ."' title=''><img src='". $user_array['avatar'] ."' alt='' width='38' height='39' class='avatarimg' style='border: 0px;' /></a>";
		}
	if (strlen($row['content']) > 300)
		{
		    $content = substr($row['content'], 0, 300);
			$output .= "<div class='vent'>
					<a href='postdetails.php?id=". $row['id'] ."' style='color: #000000; text-decoration: none;'>". $content ." ... <span style='color: #025AA2; font-size: 11px;'>read more</span></a><hr />";
		}
	else
		{
		$output .= "<div class='vent'>
					<a href='postdetails.php?id=". $row['id'] ."' style='color: #000000; text-decoration: none;'>". $row['content'] ." </a><hr />";
		}
	$output .= "<div class='date'>";
	$output .= "<a href='profile.php?user=". $row['name'] ."' title=''>". $row['name'] ."</a>    ". $row['datetime'] ."    ". $row['category'];
	$output .= "    <a href='postdetails.php?id=". $row['id'] ."'>Comments</a>(". $row['comments'] .")";
	$output .= "</div>";
	$output .= "<div class='share'>";
	if(!$compvotearray[$row['id']])
		{
		$output .= '
		<span id="vote_buttons'. $row['id'] .'" class="vote_buttons">
			<span id="a1votes_count'. $row['id'] .'" class="vote">
			<a id=":'. $row['id'] .':1:'. $row['votes1'] .':'. $row['votes2'] .':'. $row['votes3'] .':" class="vote_laugh" title="Laugh" href="javascript:;">
			Laugh</a>('. $row['votes1'] .')
			</span>';

		$output .= ' - <span id="a2votes_count'. $row['id'] .'" class="vote">
			<a id=":'. $row['id'] .':2:'. $row['votes1'] .':'. $row['votes2'] .':'. $row['votes3'] .':" class="vote_love" title="Show Love" href="javascript:;">
			Show Love</a>('. $row['votes2'] .')
			</span>';

		$output .= ' - <span id="a3votes_count'. $row['id'] .'" class="vote">
			<a id=":'. $row['id'] .':3:'. $row['votes1'] .':'. $row['votes2'] .':'. $row['votes3'] .':" class="vote_idiot" title="You\'re an Idiot" href="javascript:;">
			You\'re an Idiot</a>('. $row['votes3'] .')
			</span>
		</span><br />';
		}
	else
		{
		$output .= '
		<span id="vote_buttons'. $row['id'] .'" class="vote_buttons voted">
			<span id="a1votes_count'. $row['id'] .'">
			Laugh('. $row['votes1'] .')
			</span>';

		$output .= ' - <span id="a2votes_count'. $row['id'] .'">
			Show Love('. $row['votes2'] .')
			</span>';

		$output .= ' - <span id="a3votes_count'. $row['id'] .'">
			You\'re an Idiot('. $row['votes3'] .')
			</span>
		</span><br />';
		}
	$output .= "</div>";
	$output .= "</div>";
	$output .= "</div>";
	$output .= "<div class='clear'>
				</div>";
	$output .= "</div>";
	$output .= "</div>";
	}

return $output;
}

As you can see it's a very complex matter, lol. Has everything, category, message, name, voting, etc. Again, any tips would definitely be helpful as I am new to jquery/ajax.

joel24 · October 27, 2009

with prepend it would just add the last entry when it was being sent to the database, you can also do it another way... which might be easier...

you can create a PHP page which calls that create_output function and displays it on an otherwise blank page.

like

updateGuestBook.php

then on the page the guestbook entries would be listed in a div with id guestBookEntries

$("#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 dataString = $("#guestbook_form").serialize();

   $.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();",2000);
 $.post("updateGuestBook.php", 
					   function(data) {
						   if (data.length > 0) {
							   $('#guestBookEntries').html(data);
						   } else {
							   $('#guestBookEntries').html("<div align='center'>Error retrieving item details</div>");
						   }
					   });
      }
   });
return false;
});

that code will call the updateGuestBook.php file and get the HTML of the page and put it into the #guestBookEntries div

also the line

setTimeout("$('.postmsg').fadeOut();",2000);

should make the .postmsg div fade out after 2seconds... before it was set to 60000 (60secs)

ncovill · October 30, 2009

Thanks again man, but I still can't get this to display the new post instantly

The prepend/append is cool and all, but it even adds the error message to the div.

I just want it to prepend/append the successful comment/post, with all the information.

Sign In

Form submissing with PHP and JQuery/Ajax

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information