www.webdeveloper.com
Results 1 to 4 of 4

Thread: Post a form with AJAX

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

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