/    Sign up×
Community /Pin to ProfileBookmark

Post a form with AJAX

Hi!
I’m trying to do a chatboard. I had one that worked really fine, but I’ve migrated to wordpress and had to include it in a template to make it work, and since I was changing it a bit, I wanted to have AJAX error messages that would stay on the page and would not require going to the php file page.
Anyway, here’s the script. It’s very simple for the moment, I plan on checking for spam word, checking the IP against a IP list I have of known spammers, but for now, I just wanted to know if it worked, and… it doesn’t.
If I refresh the page, the new entries show alright. But the script is supposed to make the newest entry appear beneath the form, as well as an error message in case something went wrong. I have neither.
I’ve spent hours on this ajax thing already and I could gladly use some help…

Here’s my form file (the wordpress template) :

[code=html]<script type=”text/javascript”>
$(function() {
$(“#comment-form”).submit(function() {
var user_name = $(this).find(“input[name=user_name]”).val();
var user_email = $(this).find(“input[name=user_email]”).val();
var chat_body = $(this).find(“textarea[name=chat_body]”).val();
$.post(“http://www.mydomain.com/chat/post2.php”,{
user_name:user_name,
user_email:user_email,
chat_body:chat_body
}, function(data) {
if(data!=”Ok”){
$(“.error”).empty().append(data);
}
else{
$(“#resultatAjax”).hide().append(user_name + “à écrit”+ chat_body).slideDown();
}

});
return false;
});
});
</script>
<div id=”container”>

<div id=”content” role=”main”>
<h1 class=”page-title”><?php echo get_the_title(); ?></h1>
<div id=”tag-board”>
<div align=”center”>
<form action=”#” method=”post” id=”comment-form” enctype=”multipart/form-data”>
<fieldset>
<p style=”float:left;padding-left:60px;”><label for=”user_name” class=”formbold”>Nom ou pseudo&nbsp;:</label><br />
<input name=”user_name” id=”user_name” type=”text” size=”25″ maxlength=”255″ /></p>

<p style=”float:right;padding-right:60px;”><label for=”user_email” class=”formbold”>URL&nbsp;:</label><br />
<input name=”user_email” id=”user_email” type=”text” size=”25″ maxlength=”255″ value=”http://” /></p>

<p style=”clear:both;”><label for=”chat_body” class=”formbold”>Commentaire&nbsp;:</label><br /><br />
<textarea class=”center” id=”chat_body” name=”chat_body” cols=”65″ rows=”5″></textarea>
</p>
</fieldset>

<fieldset>
<p align=”center”><input type=”submit” class=”submit” name=”Sign” value=”Go !” size=”25″ /></p>
<div class=”error” style=”color:black;”></div>
</fieldset>
</form>
<div id=”resultatAjax”></div>
</div>[/code]

(beneath that, I have the mysql call to get the entries from the database, everything works fine there, so no need to show it)

And my post2.php file:

[code=php]<?
extract($_POST);
if(isset($user_name) && !empty($chat_body)) {
include ‘../wp-content/themes/LEO/connexion.php’;
$q = “insert into shoutbox (id,user_name,chat_body,user_email,date_time,user_ip) VALUES (”,’$user_name’,’$chat_body’,’$user_email’,now(),’$user_ip’)”;
mysql_query($q) or die(mysql_error());
echo “Ok”;
}
else {
echo “On a oublié quelque chose ?”;
}
?>[/code]

I tried to alert(data) to see what came through and got nothing, so the problem must be getting the data back from the post2.php file… I now they go through from the form to the post2.php file since they are written into the database.
I could definitely use some help, here ? Thanks!

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Ness_du_FratauthorNov 25.2013 — Sorry, forget it, it does work. I've had problems with my internet connection lately and I guess I messed up with one upload. I also changed the path to post2.php to a relative one instead of an absolute one, and I think that's what got things running.

However, I still do have a question: is there a way to return the time and date ? Like I was using to show the result:
[code=php]
while ($row = mysql_fetch_array($result))
{
$id = $row["id"];

$user_name = $row["user_name"];

$user_email = $row["user_email"];

$chat_body = $row["chat_body"];

$date_time = $row["date_time"];

//put the date in french format
$newdate = date("d-m-Y",strtotime($date_time));
$heure = date ("H:i", strtotime($date_time));
[/code]


And then I was echoing it with $newdate and $heure.

Can I transfer that to my ajax message one way or another?
Copy linkTweet thisAlerts:
@Shirly741Nov 25.2013 — I agree allthis post. I really impressed by it.
Copy linkTweet thisAlerts:
@ashokaaNov 25.2013 — Good and effective technique.
×

Success!

Help @Ness_du_Frat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...