Ajax Jquery Comments Page

Question

I've looked at many posts here on SO and I thought that what I have would work in terms of sending form data using AJAX without refreshing the page. Unfortunately it's not working and I'm at a loss to see what it going wrong so here is my code:

profile.php

<script>
    $(function () {
        $('form#commentform').on('commentsubmit', function(e) {
            $.ajax({
                type: 'post',
                url: 'insertcomment.php',
                data: $(this).serialize(),
                success: function () {
                    alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
                    $("#comment").val('');
                }
            });
            e.preventDefault();
        });
    });     
</script>


<form id='commentform' method='post'>
<textarea class='comment' id='comment'></textarea>
<input type='hidden' name='activityid' value='$activityid'>
//$activityid is the ID of the status so the database knows what status ID to connect the comment with
<input type='submit' name='commentsubmit' value='Comment'>
</form>

insertcomment.php

<?php
include 'header.php';


$activityid=htmlspecialchars($_POST['activityid'], ENT_QUOTES);
$comment=htmlspecialchars($_POST['comment'], ENT_QUOTES);


$commentsql=$conn->prepare('INSERT INTO wp_comments (user_id, activity_id, comment, datetime) VALUES (:userid, :friendid, :comment, CURRENT_TIMESTAMP)');
$commentsql->bindParam(':userid', $_SESSION['uid']);
$commentsql->bindParam(':activityid', $activityid);
$commentsql->bindParam(':comment', $comment);
$commentsql->execute();   


include 'bottom.php';
?>

The end result hopefully is that the comment gets inserted into the database without refreshing the page and then the text area is reset.

As of right now when I click the comment submit button it refreshes the page.

As an advice, i will recommend you to use jQuery form plugin to make these ajax posts easier. it will prevent the default page refresh and you can add a progress bar — DJ22T
– DJ22T, Commented Dec 12, 2013 at 15:18
I tried that and the same thing happened with user2348221's code. I got a success message but the comment didn't go into the database. — user3093592
– user3093592, Commented Dec 12, 2013 at 15:26

Rickert · Accepted Answer · 2013-12-12 15:26:36Z

1

try this:

   $(document).ready(function(){
        $('form#commentform').submit(function( e ) {
            var postData = $(this).serializeArray();
            $.ajax({
                type: 'post',
                url: 'insertcomment.php',
                data: postData,
                success: function () {
                    alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
                    $("#comment").val('');
                }
            });
            e.preventDefault();
        });
    });

edited Dec 12, 2013 at 15:26

answered Dec 12, 2013 at 15:15

Rickert

1,6711 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rickert Over a year ago

i made a mistake, can you try it agian? i edited the code above

user3093592 Over a year ago

Ok that time I got the success message and the textarea cleared but the comment did not insert into the database.

Rickert Over a year ago

can you check if he send the post data correctly with the ajax?

Nikhil Kudtarkar Over a year ago

Shouldn't this be -- $commentsql=$conn->prepare('INSERT INTO wp_comments (user_id, activity_id, comment, datetime) VALUES (:userid, :friendid, :comment, CURRENT_TIMESTAMP)'); $commentsql->bindParam(':userid', $_SESSION['uid']); $commentsql->bindParam(':friendid', $activityid); $commentsql->bindParam(':comment', $comment); $commentsql->execute();

Collectives™ on Stack Overflow

Ajax Jquery Comments Page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related