www.webdeveloper.com
Results 1 to 4 of 4

Thread: Post a form with AJAX

Hybrid View

  1. #1
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101

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

    HTML Code:
    <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>
    (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:

    PHP Code:
    <?
    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 ?";
    }
    ?>
    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!
    Last edited by Ness_du_Frat; 11-24-2013 at 10:24 PM.

  2. #2
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    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:
    PHP Code:
    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)); 
    And then I was echoing it with $newdate and $heure.
    Can I transfer that to my ajax message one way or another?

  3. #3
    Join Date
    Nov 2013
    Posts
    1
    I agree allthis post. I really impressed by it.

  4. #4
    Good and effective technique.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles